🌱 기초 프론트엔드
CSS 특이성(Specificity)이란?
쉽게 이해하기
회사에서 부장님과 사원의 지시가 다를 때 부장님 말을 따르는 것처럼, CSS도 더 구체적인 선택자의 스타일이 우선 적용됩니다. ID 선택자가 '부장님'이고, 클래스 선택자가 '대리님', 태그 선택자가 '사원'이라고 생각하면 돼요.
핵심 정리
여러 CSS 규칙이 충돌할 때 어떤 것이 우선 적용될지 결정하는 가중치 시스템입니다.
자세히 알아보기
CSS 특이성(Specificity)은 같은 요소에 여러 스타일이 적용될 때 어느 것이 이길지 결정하는 규칙입니다. 점수 시스템으로 작동하는데, 인라인 스타일(1000점) > ID 선택자(100점) > 클래스/속성/가상클래스(10점) > 태그/가상요소(1점) 순서로 우선순위가 높아요.
예를 들어 'button { color: red; }'와 '.btn { color: blue; }'가 있을 때, 클래스 선택자가 더 구체적이므로 파란색이 적용됩니다. '#header .btn { color: green; }'이 있다면 ID(100점) + 클래스(10점) = 110점으로 가장 높아서 초록색이 되죠.
실무에서 특이성 때문에 스타일이 안 먹히는 경우가 많습니다. 이럴 때 !important를 남발하면 나중에 더 큰 문제가 생기니, 선택자를 더 구체적으로 만들거나 CSS 구조를 개선하는 게 좋아요. 요즘은 BEM 같은 방법론을 써서 특이성 문제를 예방하기도 합니다.
크롬 개발자 도구에서 스타일 탭을 보면 어떤 규칙이 적용되고 있는지, 왜 다른 규칙들이 취소선이 그어져 있는지 확인할 수 있습니다. CSS를 디버깅할 때 특이성 개념을 이해하면 훨씬 빠르게 문제를 해결할 수 있어요.