1. 인라인 스타일 (Inline Style)
• HTML 태그 안에 style 속성을 사용해서 스타일을 지정하는 방법
• 이 방식은 태그마다 직접 스타일을 적용하므로, 다른 부분에 영향을 주지 않고 해당 태그만 스타일을 수정가능
<p style="color: red;">빨간색 글자입니다.</p>
2. 익스터널 스타일 (External Style)
• 외부 CSS 파일을 만들어서 링크하는 방법
• 보통 여러 페이지에 동일한 스타일을 적용할 때 이 방법을 사용
• HTML 파일과 CSS 파일을 분리하면, 코드 관리가 쉬워지고 유지보수도 간편
<link rel="stylesheet" href="styles.css">
CSS 파일 (styles.css):
p {
color: red;
}
3. 인터널 스타일 (Internal Style)
• HTML 파일 내 <head> 태그 안에 <style> 태그를 사용해서 스타일을 정의하는 방법
• 인라인 스타일보다는 조금 더 구조적인 방법이라서 여러 개의 스타일을 한 곳에 정의할 수 있음
• 페이지 내부에서만 스타일을 정의하려면 유용하지만, 외부 파일로 분리하는 게 보통 더 효율적
<style>
p {
color: red;
}
</style>
어떤 방식이 좋을까?
• 인라인 스타일은 짧은 HTML 문서에서 빠르게 스타일을 적용할 때 유용하지만, 유지보수가 어려움
• 인터널 스타일은 한 페이지에만 스타일을 적용할 때 괜찮고, 외부 파일을 만들지 않아서 간편하지만 코드가 복잡해지면 관리하기 어려울 수 있음.
• 익스터널 스타일은 여러 페이지에서 공통된 스타일을 적용할 수 있어서 대규모 프로젝트에서는 가장 추천되는 방법!
'개발 개념 정리 > html, css' 카테고리의 다른 글
| [ HTML ] HTML form 과 다양한 입력 필드 타입 정리 (0) | 2025.03.12 |
|---|---|
| [ HTML ] 목록 태그 (1) | 2025.03.11 |
| [ HTML ] 의미에 맞는 태그 사용하기 (0) | 2025.03.11 |
| 글로벌 속성과 로컬 속성 (0) | 2025.01.13 |
| HTML 기초 태그 정리(<h1>, <p>, <a>, <img>) (1) | 2024.12.26 |