!important Declaration

Home > Document > CSS > Pseudo > !important

!important Declaration

!important Declaration(!중요도 선언)은 모든 style 규칙에 우선하여 inline style, id selector, class selector 들로 같은 style Property들을 선언했드라도 그 값을 모두 무시하여 !important 로 선언한 Property 값을 적용시킵니다. 이러한 !important 선언을 하는 이유는 단언할 수는 없지만 저의 경우 주로 Printing 할 때 많이 사용합니다.

웹 페이지를 모니터로 볼 때는 글씨 색이 여러 가지면 보기 좋을지 모르지만 Printer로 출력하게되면 Blue 계통이나 gray 계통의 글씨들과 같이 흐린 색깔의 글씨는 희미하게 출력이되어서 보기가 불편하게 되져. 이런 경우 여러분들이라면 과연 어떻게 글씨색을 검정색으로 바꾸겠습니까? selector들을 하나 하나 찾아서 수정해 주는 방법? 노가다성이 아주 짙은 별로 좋지 못한 생각입니다. 이럴 때 !important를 선언하면 한 번에 페이지의 모든 글씨색을 #000 (black)으로 바꿀 수 있습니다.

CSS Scripting

없음

!important 사용법

!important 사용법은 { Property : 사용값 !important }와 같이 사용값 뒤에 !important를 붙여 주면 됩니다. 이 때 사용값과 !important 사이에 space가 들어가도 되고 안 들어가고 붙어 있어도 됩니다.

사용예

<STYLE type="text/css">
<!-- 
* {color : #000000 !important;} 
/*Universal Selector에 !important를 사용하여 문서의 모든 글씨색을 #000000으로 지정*/ 
div {background-color: #FFFFFF !important;}
/*Type Selector에 !important를 사용하여 문서의 모든 DIV에 배경색을 #FFFFFF로 지정*/ 
-->
</STYLE>

예제

이 예제는 !Important 선언으로 문서의 모든 글씨색을 #000000(black)으로하고 배경색을 #FFFFFF(white)로 지정한 예제 입니다. 예제 중에 Inline style이 사용되어도 !important 선언이 되면 모두 무시합니다. 새 파일을 만들고 아래의 소스를 복사하여 실행해 보시져.

입력

<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>

Top

Back

New

검색