CSS 명시도(Specificity)에 대해서 설명해주세요.
분야: 프론트엔드
CSS 명시도는 스타일이 충돌할 때 어떤 것이 우선 적용될지를 결정하는 개념입니다. 웹 페이지에서 여러 개의 CSS 규칙이 동일한 요소에 적용될 수 있습니다. 이때 브라우저는 명시도를 계산하여 어떤 스타일을 적용할지 판단합니다.
CSS 명시도는 선택자의 종류에 따라 다음과 같은 우선순위를 갖습니다.
- 1순위: 인라인 스타일
- 2순위: id 선택자
- 3순위: 클래스, 가상 클래스, 속성 선택자
- 4순위: 요소 선택자
이러한 우선순위에 따라 점수를 부여한 뒤 합산하여 어떤 스타일을 적용할지 결정하는 것입니다. 만약 합산 점수가 동일한 경우, 나중에 선언된 것이 적용됩니다.
p { color: blue; } /* 요소 선택자 */
.text { color: red; } /* 클래스 선택자 */
#unique { color: green; } /* ID 선택자 */
<p id="unique" class="text">Hello, CSS!</p>
이 경우, <p> 요소는 명시도가 가장 높은 ID 선택자가 적용된 #unique의 스타일을 따라 초록색(green)으로 표시됩니다.
명시도가 높은 스타일을 강제로 덮어쓰려면 어떻게 해야 하나요? 🤔
!important를 사용하면 됩니다. !important는 타일 규칙의 명시도를 무시하고 가장 높은 우선순위를 갖게 합니다. 만약 동일한 속성에 대해 여러 개의 !important 규칙이 존재하면, 그때는 일반적인 명시도 규칙을 따르게 됩니다.
예를 들어, 다음과 같이 기존의 규칙을 강제로 덮어쓸 수 있습니다.
p { color: black !important; }
다만, !important는 과도하게 사용하면 유지보수가 어려워질 수 있으므로 최대한 필요한 경우에만 사용해야 합니다.