왜 내 CSS 스타일은 제대로 적용되지 않을까?
CSS 명시도(Specificity)에 대해서 알고 계신가요?
혹시 CSS 스타일을 적용하려고 했는데 마음대로 적용이 되지 않은 적이 있으신가요?
이번 글은 이런 분들을 위해서 CSS 캐스케이딩(Cascading) 조건중 하나인 CSS 명시도(Specificity)에 대해서 알려 드리려고 합니다.
웹 개발자라면 반드시 알고 있어야 하는 개념이지만 기초적인 지식이다 보니 오히려 간과하게 되는 경우가 있는 것 같은데요. 모르셨다면 이번 글을 통해 쉽고 빠르게 알아 두시는 것을 추천드립니다.
CSS 명시도 소개
출처: https://specifishity.com
위의 이미지는 CSS 명시도의 전반에 대해서 아주 잘 보여주고 있는 그림인데요, 혹시 위의 그림을 보고 명시도에 대해서 이해가 조금 가시나요?
CSS 명시도(Specificity)는 스타일 규칙이 적용되는 우선순위를 결정하는 데 중요한 개념입니다.
다만 명시도가 우선순위라는 말과 일치하다고 생각하면 안 되는데요, 명시도는 오히려 해당 객체를 얼마나 명확하게(구체적으로) 가리키고 있는가에 대한 내용입니다.
CSS 명시도 규칙
명시도는 `0-0-0-0`과 같은 방식으로 통해 요소를 가리키는 정도를 시각화합니다.
이것이 의미하는 바는 아래 설명과 같습니다.
- 요소(element)를 나타내는 자리는 네 번째 자리이며 `0-0-0-1`로 나타냅니다.
- 클래스(class), 가상 클래스(Pseudo-class), 속성(attribute)을 나타내는 자리는 세 번째 자리이며 `0-0-1-0`로 나타냅니다.
- ID를 나타내는 것은 두 번째 자리이며 `0-1-0-0`로 나타냅니다.
- 인라인 요소(style="") 일 때는 첫 번째 자리이며 `1-0-0-0`로 나타냅니다.
CSS 명시도 레벨의 이해
명시도가 `-`로 구분되어 있는 이유는 각 레벨이 독립적이기 때문입니다.
예를 들어 다음과 같은 html 구조가 있다고 해봅시다.
<ul>
<li>
<div>
<a class="go-home"></a>
</div>
</li>
</ul>
이 경우에 대해서 명시도를 나타내면,
- `. go-home`으로 선택할 경우 명시도는 `0-0-1-0`입니다.
- `ul li div a`로 선택할 경우 명시도는 `0-0-0-4`입니다.
4번째 자리만 비교를 한다면 `0`과 `4`이므로 후자의 경우가 높지만, 각 자리의 위계는 절대적이어서 4번째 자리가 아무리 높더라도 3번째 자리가 전자의 경우가 높기 때문에 전자의 경우가 명시도가 높습니다.
하지만 만약 CSS 명시도 레벨이 겹치는 경우에는 나중에 쓴 규칙이 앞에 쓴 규칙을 덮어버리는 override가 발생합니다.
/* case 1 */
ul li {
color: #ff0000;
}
/* case 2 */
html li {
color: #0000ff;
}
이 경우 문서상으로 case 1이 element에 더 가깝게 선언되어서 명시도가 높다고 판단할 수도 있는데, ‘구조, 위치상 가깝다’는 명시도와 아무런 상관이 없습니다.
결국 명시도는 두 경우 다 `0-0-0-2`이기 때문에 나중에 쓴 case 2가 적용되게 되고 폰트 컬러는 블루가 적용되게 됩니다.
!important 룰 브레이커
앞서 설명한 모든 규칙을 무시하는 속성이 있는데 바로 !important 입니다.
!important의 경우 명시도 규칙으로 나타내자면 `1-0-0-0-0`으로 나타낼 수 있는데, 여태껏 설명한 모든 경우보다 레벨이 높습니다.
그 정도로 강력한 속성이기 때문에 매우 조심스럽게 사용해야 하는데, 저는 예전에 js로 css를 다루다가 적용이 안될 때 그냥 !important를 사용한 적이 있어서 공부하면서 매우 반성스러웠습니다.
그렇기 때문에 !important는 남발하게 될 경우 차후 의미가 무색해져 버릴 수 있으니 정말 중요한 순간에만 사용해야 합니다.
정리
CSS 명시도(Specificity)는 스타일 규칙이 적용되는 우선순위를 결정하며, 해당 객체를 얼마나 명확하게(구체적으로) 가리키고 있는가에 따라 우선순위가 결정됩니다.
!important > Inline Style > id > class > tag
위와 같은 순서대로 명시도가 결정됩니다.
왼쪽의 경우가 가장 높고 오른쪽의 경우가 가장 낮습니다.
저희 더컴퍼스는 하나의 웹사이트를 만들 때에도 좋은 웹사이트를 만들기 위해 다양한 노력하고 있습니다.
이런 노력들이 바탕이 되어 더컴퍼스는 60여 개 이상의 관공서, 스타트업, 유튜버 및 유수기업 홈페이지 및 프로젝트 개발을 성공적으로 수행하였으며, 단순하고 일반적인 홈페이지가 아닌, 담당자님의 철저한 니즈 분석과 소통을 통해 꼭 맞는 웹사이트를 제작해드리고 있습니다.
직접 웹페이지를 만드실 때 어려움을 느끼시거나 전문가의 조언이 필요하시다면 언제든 편하게 연락해 주세요.
