[CSS] 스타일 강제적용 !important

css 작업중 많은 스타일을 적용하면서 여러스타일이 반복적용되면, 그중 어떤 스타일이 먼저적용되는지, 또는 적용되는순서를 전부 읽어내기 어려울때 사용되는 !important 에 대해서 알아보고자 합니다.

 

 

예를들어 div에 mainbanner 라는 클래스가 명명되어있고,

 

css 에서는 위와같이스타일이 적용되어있습니다.

하지만 위와같이 단순하게 짜여져있는 소스라면 .main_banner 부분을 간단하게 수정하여 스타일을 변경하면 되는데요.

여러개의 css쿼리와, css파일들이 엮여 하나의 클래스에 여러개의 스타일이 적용된다면 일일히 선택자 점수를 계산하여 적용하기에는 어려운데요, 물론 선택자 점수 계산을 하여 원하는방향대로 수정하는것이 가장 올바른 방법입니다.

 

이럴때 사용되는것은 강제적용으로 !important 가 사용됩니다.

 

사용방법은 아주 간단합니다. css 부분의 스타일을 정해준 뒤, 뒤에 !important 라고만 입력해주시면 강제적용됩니다.

 

 

하지만 !important는 모든 순서를 무시하고 적용되므로 꼭 필요한 경우가 아니라면 사용되지않는것이 바람직합니다.

또한 한두번 사용된다면 차후에 유지보수에 있어서 문제가 되는경우도 있으니 반드시 꼭 사용해야할때만 사용하도록합니다.

 

하지만 같은요소에 !important가 한번더 사용된다면 순서는 원래의 상태로 돌아가게됩니다.

여기서 주의점은 전체스타일에 적용되는것이 아니라 개별 스타일에 적용되므로 익스플로러6 미만의 버전에서는 정상적으로 인식되지 않을 수 있습니다.