🌱 기초 프론트엔드
CSS 우선순위는 어떻게 결정되나요?
쉽게 이해하기
회사에서 명령이 여러 개 내려올 때와 비슷해요. 사장님의 직접 지시 > 부장님 지시 > 팀장님 지시 순으로 우선순위가 있듯이, CSS도 inline 스타일 > id > class > 태그 순으로 우선순위가 정해져요.
핵심 정리
CSS 우선순위는 선택자의 종류와 개수로 결정되며, 더 구체적인 선택자가 우선 적용돼요.
자세히 알아보기
CSS를 작성하다 보면 같은 요소에 여러 스타일이 중복 적용될 때가 있어요. 이때 어떤 스타일이 최종적으로 적용될지 결정하는 게 바로 '명시도(Specificity)' 규칙이에요.
우선순위는 이렇게 계산돼요. inline 스타일(`style="..."`)이 가장 강력하고(1000점), 다음이 id 선택자(#header, 100점), class나 속성 선택자(.menu, [type="text"], 10점), 마지막이 태그 선택자(div, p, 1점)예요. 점수를 합산해서 높은 쪽이 이기는 거죠. 예를 들어 `#header .menu`는 110점, `div.menu`는 11점이 됩니다.
같은 점수면 나중에 작성된 코드가 적용돼요. 그래서 CSS 파일 순서가 중요해요. 또 `!important`를 붙이면 모든 규칙을 무시하고 최우선 적용되지만, 남용하면 나중에 수정하기 어려워지니까 꼭 필요할 때만 써야 해요.
실무에서는 class 선택자를 주로 사용하고, id는 특별한 경우에만 써요. id는 점수가 너무 높아서 나중에 덮어쓰기 어렵거든요. BEM이나 CSS Modules 같은 방법론을 쓰면 우선순위 충돌을 줄일 수 있어요. 브라우저 개발자 도구에서 어떤 스타일이 적용됐는지, 왜 덮어씌워졌는지 확인할 수 있으니 막힐 때 활용하면 좋아요.