Specificity (명시도)

✅Specificity (명시도)

CSS에서 특정 요소에 적용할 스타일을 결정하는 중요한 개념 중 하나가 Specificity (명시도)입니다. 동일한 요소를 가리키는 여러 개의 CSS 규칙이 존재할 경우, 어떤 스타일이 적용될지를 결정하는 우선순위를 계산하여 적용됩니다.

---

📌 Cascading (위에서 아래로 흐름)

CSS는 "Cascading"이라는 개념을 따르며, 이는 스타일이 위에서 아래로 흐르는 방식으로 적용된다는 의미입니다. 동일한 요소를 대상으로 여러 개의 스타일 규칙이 존재하면, 가장 마지막에 선언된 스타일이 우선 적용됩니다.

✅ 하지만 단순한 선언 순서만으로 스타일 적용을 판단할 수 없습니다. **선택자들의 명시도(Specificity)**에 따라 최종 스타일이 결정됩니다.

---

📌 명시도 (Specificity) 계산 방식

명시도가 높은 선택자가 낮은 선택자를 덮어씌웁니다. 명시도의 우선순위는 다음과 같습니다.

우선순위 스타일 유형 설명

우선순위	스타일 유형	설명
1순위	!important	가장 강력한 우선순위를 가지며, 어떤 스타일보다도 우선 적용됨
2순위	인라인 스타일 (style 속성)	해당 요소의 style 속성 내에 직접 적용된 스타일
3순위	아이디 선택자 (#id)	특정 아이디를 가진 요소에 적용하는 스타일
4순위	클래스 선택자 (.class), 속성 선택자 ([attr]), 가상 클래스 (:hover 등)	특정 그룹의 요소를 선택하는 스타일
5순위	요소 선택자 (h1, p, div 등)	특정 태그(요소)에 적용하는 스타일
6순위	전체 선택자 (*), 하위 선택자 (div p), 동위 선택자 (div + p) 등	가장 낮은 우선순위를 가짐

✅ 좁은 범위의 선택자일수록 명시도가 높아집니다.

---

📌 명시도 예제

아래 HTML과 CSS 코드에서 어떤 스타일이 적용될지 살펴봅시다.

✅ HTML 코드

<p>1</p>
<p class="orange">2</p>
<p class="green orange">3</p>
<p class="orange green">4</p>
<p id="red" class="orange">5</p>
<h2 id="red" class="orange">6</h2>
<p id="red" class="orange" style="color: brown;">7</p>
<h2 id="red" class="orange" style="color: brown;">8</h2>

✅ CSS 코드

h2 {
    color: #3675d4 !important;
}

p {
    color: blue;
}

.orange {
    color: orange;
}

.green {
    color: green;
}

#red {
    color: red;
}

✅ 스타일 적용 분석

• h2 { color: #3675d4 !important; } → !important가 적용되었기 때문에 무조건 이 스타일이 적용됨.
• p id="red" class="orange" style="color: brown;" → 인라인 스타일 (style="color: brown;")이 가장 강력하여 brown 적용.
• p class="green orange" → 클래스 선택자는 우선순위가 같지만, 가장 마지막에 선언된 .orange가 적용됨 → color: orange; 적용.
• p id="red" class="orange" → 아이디 선택자(#red)가 클래스 선택자보다 우선순위가 높으므로 color: red; 적용.
• h2 id="red" class="orange" style="color: brown;" → !important 규칙이 적용된 color: #3675d4;이 최종 적용됨.

---

📌 결론

• CSS는 Cascading (위에서 아래로 흐름) 원칙을 따르지만, 선택자의 우선순위에 따라 스타일이 결정됨.
• 좁은 범위를 선택할수록 우선순위가 높아짐 (id > class > 요소).
• !important는 최상위 우선순위를 가지므로 신중하게 사용해야 함.
• 코드를 작성할 때 명시도를 고려하여 불필요한 중복 스타일을 줄이면 유지보수가 쉬워짐.

CSS의 명시도를 이해하고 활용하면 더욱 깔끔하고 효율적인 스타일링이 가능합니다! 🚀