CSS에서 여러 스타일 규칙이 동일한 요소에 적용될 때, 어떤 스타일이 우선적으로 적용될지는 구체성(Specificity)에 의해 결정됩니다. 구체성은 선택자가 얼마나 구체적으로 요소를 선택하는지를 나타내는 값으로, 이 값이 높을수록 우선순위가 결정됩니다. 이 개념을 이해하면 CSS 스타일이 예상과 다르게 적용되는 문제를 해결할 수 있습니다.
CSS 구체성(Specificity) 쉽게 이해하기
CSS 구체성(Specificity) 쉽게 이해하기
위의 목차를 클릭하면 해당 글로 자동 이동 합니다.
CSS 구체성이란?
- CSS 구체성은 여러 스타일 규칙이 동일한 요소에 적용될 때, 어떤 스타일이 우선적으로 적용될지를 결정하는 규칙입니다. 구체성은 선택자가 얼마나 구체적으로 요소를 선택하는지를 나타내는 값으로, 이 값이 높을수록 우선순위가 먼저 결정됩니다. 구체성을 이해하면 CSS 스타일이 예상과 다르게 적용되는 문제를 해결할 수 있습니다.
CSS 구체성의 4가지 레벨
구체성은 4가지 카테고리로 나뉘며, 각 카테고리는 점수처럼 계산됩니다. 점수는 a,b,c,d 형태로 표현되며, a가 가장 높은 우선순위를 가집니다. 즉, a 자리부터 d 자리까지 우선순위 입니다.
1. 인라인 스타일 (Inline Styles) - 우선 순위 1위
- HTML 요소의 style 속성에 직접 작성된 스타일은 가장 높은 우선순위를 가집니다.
- 구체성 값: 1,0,0,0
2. ID 선택자 (ID Selectors) - 우선 순위 2위
- #id와 같이 요소의 id 속성을 선택하는 선택자는 두 번째로 높은 우선순위를 가집니다.
- 구체성 값: 0,1,0,0
3. 클래스 및 속성 선택자 (Class and Attribute Selectors) - 우선 순위 3위
- .class 또는 [attribute]와 같이 클래스나 속성을 선택하는 선택자는 세 번째 우선순위를 가집니다.
- 구체성 값: 0,0,1,0
4. 요소 선택자 (Element Selectors) - 우선 순위 4위
- h1, p와 같이 요소 이름을 선택하는 선택자는 가장 낮은 우선순위를 가집니다.
- 구체성 값: 0,0,0,1
CSS 구체성 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<style>
/* 요소 선택자: 구체성 = 0,0,0,1 */
p {
color: blue;
}
/* 클래스 선택자: 구체성 = 0,0,1,0 */
.highlight {
color: green;
}
/* ID 선택자: 구체성 = 0,1,0,0 */
#special {
color: red;
}
/* 복합 선택자: 구체성 = 0,1,1,1 (ID + 클래스 + 요소) */
#special p.highlight {
color: orange;
}
</style>
</head>
<body>
<!-- 인라인 스타일: 구체성 = 1,0,0,0 -->
<p style="color: purple;">이 문단은 인라인 스타일이 적용됩니다.</p>
<!-- ID 선택자가 클래스 선택자보다 우선합니다. -->
<p id="special" class="highlight">이 문단은 ID 선택자가 적용됩니다.</p>
<!-- 클래스 선택자가 요소 선택자보다 우선합니다. -->
<p class="highlight">이 문단은 클래스 선택자가 적용됩니다.</p>
<!-- 요소 선택자만 적용됩니다. -->
<p>이 문단은 요소 선택자가 적용됩니다.</p>
<!-- 복합 선택자: ID + 클래스 + 요소 -->
<div id="special">
<p class="highlight">이 문단은 복합 선택자가 적용됩니다.</p>
</div>
</body>
</html>
예제 코드 설명
1. 인라인 스타일
- <p style="color: purple;">은 style 속성에 직접 스타일이 적용되었기 때문에 가장 높은 우선순위를 가집니다. 따라서 이 문단은 보라색으로 표시됩니다.
2. ID 선택자
- #special은 id 속성을 선택하므로 .highlight 클래스보다 우선순위가 높습니다. 따라서 두 번째 문단은 빨간색으로 표시됩니다.
3. 클래스 선택자
- .highlight는 클래스 선택자로, 요소 선택자보다 우선순위가 높습니다. 따라서 세 번째 문단은 초록색으로 표시됩니다.
4. 요소 선택자
- p는 요소 선택자로, 가장 낮은 우선순위를 가집니다. 따라서 네 번째 문단은 파란색으로 표시됩니다.
5. 복합 선택자
- #special p.highlight는 ID, 클래스, 요소 선택자를 모두 포함하므로 구체성 값이 0,1,1,1입니다. 이는 단일 ID 선택자보다 높은 우선순위를 가집니다. 따라서 다섯 번째 문단은 주황색으로 표시됩니다.
CSS 구체성 비교 규칙
- 구체성 값이 높은 스타일이 우선 적용됩니다.
- 구체성 값이 동일한 경우, 나중에 정의된 스타일이 적용됩니다.
- !important는 구체성과 상관없이 가장 높은 우선순위를 가집니다. (단, 남용은 피하는 것이 좋습니다.)
결론
CSS 구체성은 스타일의 우선순위를 결정하는 핵심 개념입니다. 인라인 스타일 > ID 선택자 > 클래스/속성 선택자 > 요소 선택자 순으로 우선순위가 높으며, 복합 선택자는 포함된 선택자의 구체성을 합산합니다. 이를 이해하면 더 효율적이고 예측 가능한 CSS를 작성할 수 있습니다.
반응형
'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글
| HTML - display(인라인, 인라인블록, 블록) 개념 이해하기 (0) | 2025.03.20 |
|---|---|
| HTML - Box 모델 (블록박스, 인라인박스) 웹디자인 기본 개념 (0) | 2025.03.20 |
| CSS - 속성 선택자(Selector) 7가지 사용방법 (0) | 2025.03.19 |
| CSS - 선택자(Selector) 결합하여 사용하는 방법 (0) | 2025.03.18 |
| CSS - Class 선택자 사용 (0) | 2025.03.18 |