본문 바로가기

CSS

css 속성 중 !important 선언

[css] css 속성 중 !important 선언

 

 

 * !important 선언에 대해서

 

!important(!중요도) 선언은 모든 style 규칙에 우선하며 inline style, id selector, class selector들로

같은 style 속성을 선언했더라도 그 값을 모두 무시하여 !important로 선언한 속성값을 적용시킵니다.

이러한 !important 선언을 하는 이유는 다양하겠지만 주로 인쇄 즉 프린트 적용을 위해 많이 사용된다고 합니다.

 

웹페이지를 모니터로 볼때는 글씨 색이 여러가지면 보기 좋을지 모르지만 프린터로 출력하게 되면

블루계통이나 그레이계통의 글씨들과 같이 흐린 색상의 글씨는 희미하게 출력되어 보기가 불편하게 됩니다.

이런 경우 글씨를 검정색으로 바꾸기 위해 selector를 하나하나 찾아 수정할 시 많은 시간이 필요합니다.

하지만 이럴 때 !important를 선언하면 한번에 모근 글씨를 #000(black)으로 바꿀 수 있습니다.

 

자세한 사용법과 예제에 대해서는 아래를 참고해 주세요.

 

 

* !important 사용법

 

!important 사용법은 {속성 : 속성값 !important }와 같이 속성값 뒤에 !important를 붙여 주시면 됩니다.

이때 속성값과 !important 사이에 공백(space)가 들어가도 되고 안들어가고 붙여 사용해도 됩니다.

 

→ 사용예

 

<style type="text/css">

<!--

* {color : #000000 !important;}

div {background-color : #ffffff !important;}

-->

</style>

 

▲ 위 소스방법으로 !important 선언을 사용하시면 됩니다.        

 

 

* !important 예제

 

!important 선언으로 문서의 모든 글씨색상을  #000(black)으로 하고 배경색을 #fff(white)로 지정한 예제입니다.

 

→ 입력소스

<HTML>

<HEAD>

<TITLE>!important 선언</TITLE>
<STYLE type="text/css">
<!--

*{

color:#000000 !important;
background-color: #FFFFFF !important;
border:1px solid #808080 !important;
}

-->
</STYLE>
</HEAD>

<BODY>

<P style="color:red">

Inline style로 글씨색을 red로 지정해도

style Block에서 !important 선언으로 검정색 글씨가 된다.
</P>
<DIV style="background-color:gold;

border:1px solid red;width:100%;height:50px">
Inline style로 배경색을 gold로 지정해도 style Block에서

!important 선언으로 흰색 배경색이 된다.
</DIV>

</BODY>

</HTML>

'CSS' 카테고리의 다른 글

[list-style-position]  (0) 2012.05.14
DIV와 TABLE의 차이점  (0) 2012.03.07
유니버설 디자인을 위한 실전 UI(HTML/CSS)개발 가이드  (0) 2012.03.06