CSS 명시도

여러 CSS 규칙이 동일한 요소에 충돌할 때 어떤 스타일을 우선 적용할지 결정하는 개념입니다.

우선순위

선택자의 종류에 따라 다음과 같은 우선순위를 가지며, 각 우선순위에 점수를 부여해 합산한 값이 높은 쪽이 적용됩니다.

합산 점수가 동일하다면 나중에 선언된 스타일이 적용됩니다.

p { color: blue; } /* 요소 선택자 */
.text { color: red; } /* 클래스 선택자 */
#unique { color: green; } /* ID 선택자 */

<p id="unique" class="text">Hello, CSS!</p>

위 경우 <p> 요소는 명시도가 가장 높은 ID 선택자 #unique의 스타일을 따라 초록색(green)으로 표시됩니다.

!important를 사용하면 명시도 규칙을 무시하고 가장 높은 우선순위로 스타일을 적용할 수 있습니다. 다만 동일한 속성에 여러 !important 규칙이 존재하면 그때는 다시 일반적인 명시도 규칙을 따릅니다.

p { color: black !important; }

과도하게 사용하면 이후 스타일을 덮어쓰기 어려워져 유지보수가 힘들어지므로 꼭 필요한 경우에만 사용해야 합니다.

CSS 명시도는 인라인 스타일 > id 선택자 > 클래스/가상 클래스/속성 선택자 > 요소 선택자 순으로 우선순위를 계산하며, !important는 이 우선순위를 무시하는 예외적인 수단입니다.