개요
CSS의 특성상 중복되는 속성이 등장 할 수 있다.
이때 특정 원칙에 따라 CSS를 처리한다.
1. 속성값 뒤에 !important 를 붙인 속성
2. HTML에서 style을 직접 지정한 속성
3. #id 로 지정한 속성
4. .클래스, :추상클래스 로 지정한 속성
5. 태그이름 으로 지정한 속성
6. 상위 객체에 의해 상속된 속성
같은 우선 순위에 있는 경우, 쪽수가 많은 경우가 우선되며, 이마저 같은 경우 CSS에서 나중에 선언한 것이 우선되어 적용된다.
CSS에는 중복되는 속성 사용시 특정 순위에 따라 적용하는데, 이를 무시하고 절대적으로 우위에 가게 하고 싶다면 속성 값 뒤에 !important 를 사용하면 된다.
!important 는 우선순위 뿐만 아니라 디자이너-개발자간 교류에서 중요한 속성이라는 표현을 할 때 쓰이기도 한다.
예제
<html> <head> <style> .exbox1 { font-color:blue } #ex1 { font-color:skyblue } </style> </head> <body> <div class="exbox1" id="ex1">id로 지정된 속성이 먼저 적용됩니다.</div> <div class="exbox1" id="ex1" style="font-color:green">style 속성으로 지정된 속성이 먼저 적용됩니다.</div> </body> </html>
출력 결과:
id로 지정된 속성이 먼저 적용됩니다.
style 속성으로 지정된 속성이 먼저 적용됩니다.
!important 사용법
.exbox2 { color:blue } #ex2{ color:black !important }
예제
<html> <head> <style> .exbox2 { color:black !important } #ex2{ color:blue } </style> </head> <body> <div class="exbox2" id="ex2">!important 때문에 색이 검정이 됩니다.</div> </body> </html>
출력 결과:
!important 때문에 색이 검정이 됩니다.