HTML
css 우선순위 !important
이상욱1
2015. 9. 18. 16:23
3. 선택자(Selector) 우선순위
스타일 시트는 다음과 같은 3개의 CSS원천 소스(Original Source)를 가질 수 있습니다.
- 제작자(author) 원천 소스 : 웹 사이트 제작자가 지정하는 자신의 페이지 스타일
- 사용자(user) 원천 소스 : 사용자가 직접 정하는 자신이 사용할 스타일
- 사용자 도구(user agent) 원천 소스 : 웹 브라우저 자체에 지정된 기본 스타일
스타일을 적용하는데는 다양한 방법이 있으며 동시에 여러가지 방법을 사용하게 되면 스타일이 충돌할 수 있습니다. 그렇기 때문에 각 원천 소스간은 물론, 선택자 간의 우선순위를 알아야 합니다. 다음의 우선순위 규칙을 통해 원하는 스타일을 정확히 적용할 수 있습니다.
1) 원천 소스 우선 순위
!important 선언을 한 사용자 스타일 > !important 선언을 한 제작자 스타일 > 제작자 스타일 > 사용자 스타일 > 사용자 도구 선언 (브라우저 자체의 선언)
2) CSS 명시도(Specificity) 계산법
!important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ]
!important선언을 사용한 형식이 가장 우선 순위가 높습니다. 그래서 다른 선언들을 덮어버릴 수 있기 때문에 꼭 필요한 곳에만 사용해야 합니다.
이를 제외한 나머지 선택자는 대괄호 “[]”안에 있는 숫자를 각각의 점수로 부여하여 우선순위를 계산합니다.
- ID 선택자의 갯수를 세어서 개당 100 으로 계산합니다. (= a)
- 클래스 선택자의 갯수를 세어서 개당 10 으로 계산합니다. (= b)
- 태그 선택자의 갯수를 세어서 개당 1 로 계산합니다. (= c)
- 공용 선택자는 모두 0으로 계산합니다. (= d)
- 가상 엘리먼트는 무시합니다.
→ a + b + c + d의 값이 높은 순서대로 스타일을 적용하는 우선순위를 가지게 됩니다. 다음의 예를 봅시다.
http://www.nextree.co.kr/p8468/