CSS 적용 우선순위

CSS 디자인을 하다보면 스타일 규칙이 충돌할 때가 있다. 그렇게 되면 웹 브라우저는 어떤 스타일이 요소에 적용되는지를 결정하는데 그 기준이 우선순위라고 할 수 있다.

 

CSS 우선순위 결정 요소

웹 브라우저는 다음 요소들을 종합적으로 고려하여 CSS 우선순위를 결정한다.

 

1. 중요도 (!important 규칙)

• !important 규칙은 가장 높은 우선순위를 가지며, 다른 모든 규칙보다 우선하여 적용된다.
• 하지만 !important를 남용하면 스타일 관리가 어려워지므로, 가능한 한 사용을 자제하는 것이 좋다.

2. 명시도 (Specificity)

명시도는 스타일 규칙이 얼마나 구체적으로 요소를 선택하는지를 나타낸다. 

 

명시도가 높은 규칙이 낮은 규칙보다 우선하는데 다음과 같은 순서로 계산된다.

1. 인라인 스타일 (HTML 요소의 style 속성)
2. ID 선택자 (#id)
3. 클래스 선택자 (.class), 속성 선택자 ([attribute]), 가상 클래스 선택자 (:hover, :focus 등)
4. 태그 선택자 (div, p 등), 가상 요소 선택자 (::before, ::after 등)
5. 전체 선택자 (*)

선언 순서 (Source Order)

명시도가 같은 규칙이 여러 개 있는 경우, 나중에 선언된 규칙이 우선한다.

CSS 파일에서 아래쪽에 위치한 규칙이 위쪽에 위치한 규칙보다 우선한다.

상속 (Inheritance)

일부 CSS 속성은 부모 요소에서 자식 요소로 상속되는데 상속된 속성은 명시도가 가장 낮은 규칙으로 간주된다.

CSS 우선순위 계산 방법

명시도는 다음과 같은 점수의 합산으로 결정된다.

• 인라인 스타일 : 1000점
• ID 선택자 : 100점
• 클래스, 속성, 가상 클래스 선택자 : 10점
• 태그, 가상 요소 선택자 : 1점
• 전체 선택자 : 0점

예를 들어, 다음과 같은 선택자의 명시도는 다음과 같다.

• #header .title: 100 + 10 = 110점
• div.title: 1 + 10 = 11점

#header .title 선택자가 div.title 선택자보다 명시도가 높으므로, #header .title에 정의된 스타일이 우선적으로 적용된다.