고정 헤더 영역
상세 컨텐츠
본문
캐스케이딩 스타일이란?
HTML 문서에 스타일을 입히는 방법 중 하나인 CSS(Cascading Style Sheets)는 '캐스케이딩 스타일 시트'라고 합니다. 마치 물이 위에서 아래로 흘러내리듯, 여러 스타일 규칙들이 겹쳐져서 최종 스타일이 결정되는 것을 의미합니다.
즉, 같은 HTML 요소에 여러 개의 스타일 규칙이 적용될 때, 어떤 스타일이 우선 적용될지 결정하는 규칙을 말합니다.
왜 캐스케이딩이 필요할까요?
- 효율적인 스타일 관리: 여러 HTML 문서에 동일한 스타일을 적용할 수 있습니다.
- 유지보수 편의성: 스타일을 한곳에서 관리하여 변경이 용이합니다.
- 웹 페이지 디자인의 일관성: 모든 페이지에 동일한 디자인을 적용할 수 있습니다.
캐스케이딩의 예시
HTML
<!DOCTYPE html>
<html>
<head>
<title>캐스케이딩 스타일 예시</title>
<style>
p {
color: blue;
font-size: 16px;
}
.special {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>이것은 일반적인 문단입니다.</p>
<p class="special">이것은 특별한 문단입니다.</p>
</body>
</html>
코드를 사용할 때는 주의가 필요합니다.
- 설명:
- 모든 <p> 태그에 대해 글자색을 파란색, 글자 크기를 16px로 설정했습니다.
- class="special"을 가진 <p> 태그에 대해 글자색을 빨간색, 굵게 설정했습니다.
- 두 번째 <p> 태그는 두 가지 스타일 규칙이 적용될 수 있는데, class="special"이 더 구체적이므로 빨간색 굵은 글씨가 적용됩니다.
캐스케이딩 우선순위
어떤 스타일이 적용될지 결정하는 우선순위는 다음과 같은 요소에 따라 달라집니다.
- !important 선언: 가장 강력한 우선순위를 가집니다. 하지만 남용하면 스타일 관리가 어려워질 수 있습니다.
- 인라인 스타일: HTML 태그 내에 style 속성으로 직접 지정한 스타일
- ID 선택자: #id 형식으로 지정된 스타일
- 클래스 선택자: .class 형식으로 지정된 스타일
- 태그 선택자: p, div 등 태그 이름으로 지정된 스타일
- 브라우저 기본 스타일: 브라우저가 기본적으로 제공하는 스타일
예시:
CSS
p {
color: blue; /* 태그 선택자 */
}
.special {
color: red; /* 클래스 선택자 */
}
#myParagraph {
color: green; /* ID 선택자 */
}
위 예시에서 <p id="myParagraph" class="special"> 태그에 대해서는 #myParagraph 선택자가 가장 우선순위가 높으므로 글자색이 녹색으로 나타납니다.
정리
- 캐스케이딩은 여러 스타일 규칙이 충돌할 때 어떤 스타일이 적용될지 결정하는 규칙입니다.
- 스타일 우선순위는 !important, 인라인 스타일, ID 선택자, 클래스 선택자, 태그 선택자 순으로 높습니다.
- CSS를 효과적으로 활용하여 웹 페이지를 디자인할 수 있습니다.
'HTML_CSS' 카테고리의 다른 글
| 블록 레벨 요소와 인라인 레벨 요소 테그 정리 (0) | 2024.11.04 |
|---|---|
| !important에 대한 더 자세한 설명과 예시 (0) | 2024.11.01 |
| CSS 속성 명령: 웹 페이지 디자인의 핵심 (0) | 2024.11.01 |
| CSS란 무엇이고 왜 사용할까요? (0) | 2024.11.01 |
| HTML 텍스트 태그 실습 문제 (2) | 2024.10.28 |
