예전에는 스타일 시트를 궂이 몰라도 그럭저럭 어느정도 웹페이지를 만들수 있었다고 한다면, 요즘은 스타일 시트를 사용하지 않고서는 페이지가 안 만들어 진다고 생각될 정도로 스타일 시트를 많이 사용한다.
원래는 스타일 시트를 사용함으로 인해 데이터와 디자인 단을 분리하고 관리를 편리하게 하고... 뭐 이런 목적이었겠지만, 사실 더 어려워 졌으면 어려워 졌지 별로 쉬워졌다는 느낌은 들지 않는다. 뭐... 실력이 부족한 탓이겠지만...
하여간 스타일 시트를 사용함으로 인한 편리함 만큼이나 불편함도 늘었는데, 그중 한가지가 강제로 적용되는 스타일 시트의 상속 계념이다.
예를 들어, <div> 태그 안에 <div> 태그를 사용했을 경우 무조건 상위 <div> 태그의 스타일이 하위 <div> 태그에 적용되며 이걸 막을수있는 방법은 없다.
필요하다면 특정 스타일을 재정의 하는 방법밖에 없으며, 여기서 문제가 되는게, 동일 스타일 속성을 여러군데에서 적용했을 때 도대체 어느게 최종적으로 적용되는지가 문제다.
예를 들어...
<style type="text/css">
div {border-width:1px;border-style:solid; border-color:#FFFFFF;}
.ccc {border-color:#0000FF; width:400px;}
#bbb {border-color:#00FF00; width:200px; border-width:5px;}
#bbb {border-color:#FF0000; width:100px;}
.aaa {border-color:#000000; width:300px;}
</style>
<div id="bbb" class="aaa ccc">
test
</div>
이렇게 되어 있을때 과연 어떻게 결과가 나올까?
사실상 저기 있는 <div> 태그는 위의 스타일 시트다 다 적용되는데?
일반적으로 스타일 시트는 가장 나중에 지정한 스타일 시트다 적용되지만, 과연 그럴까?
만약 그렇다면 가장 나중에 설정된 .aaa {border-color:#000000; width:300px;} 의 적용을 받아 테두리가 검은색인 상자가 나와야 한다.
하지만...
테스트 해보면, 이렇게 결과가 나오며...
빨간색 상자로 표시된 부분의 스타일 시트만 적용된다.
즉, 무조건 나중에 정의 되었다고 무조건 그게 적용되는 것은 아니라는 것이다.
이게 뭐가 문제냐고 생각될지 모르겠지만...
만약... 위와 똑같은 페이지가...
<link type="text/css" rel="stylesheet" charset="utf-8" href="aaa.css">
<link type="text/css" rel="stylesheet" charset="utf-8" href="bbb.css">
<link type="text/css" rel="stylesheet" charset="utf-8" href="ccc.css">
<style type="text/css">
div {border-width:1px;}
.aaa {border-color:#000000; width:300px;}
</style>
..............................
..............................
..............................
<div class="aaa">
<div id="bbb" class="aaa ccc" style="width:100px;">
test
</div>
<div>
..............................
..............................
..............................
..............................
..............................
..............................
..............................
..............................
..............................
<style type="text/css">
#bbb {border-color:#FF0000;}
</style>
..............................
..............................
이런식으로 링크된 스타일 시트와 흩어져 있는 스타일 시트로 만들어져 있다면, 중간에 있는 저 레이어가 도대체 어느 스타일시트 파일의 스타일이 적용되는지 알아내기 쉽지 않을것이다.
물론 편리한 개발자 도구가 있으니 그걸 이용하면 쉽게 찾을수도 있지만, 만약 찾았다 하더라도, 도대체 어느 스타일 시트를 수정해야 문제가 없을 것인가 제법 고민을 해야 할 것이다.
물론 이렇게 되지 않도록 사이트를 잘 구성해야 하겠으나... 스타일 시트에 대한 이해도가 낮은 디자이너와 여러명의 작업자가 스쳐 지나간 소스는 그걸 기대하기 힘들다.
하여간. 이럴때 그 편리하다는 스타일 시트의 상속 개념 따위 다 필요 없으니, 내가 원하는 속성을 지정하고 싶다!! 면...
!important 속성을 지정하면 된다.
<style type="text/css">
<style type="text/css">
div {border-width:1px !important;border-style:solid; border-color:#FFFFFF;}
.ccc {border-color:#0000FF; width:400px !important;}
#bbb {border-color:#00FF00; width:200px; border-width:5px;}
#bbb {border-color:#FF0000; width:100px;}
.aaa {border-color:#000000 !important; width:300px;}
</style>
<div id="bbb" class="aaa ccc">
test
</div>
이렇게 원하는 스타일 속성 뒤에 "!important" 라고 붙여 주면된다.
이렇게 !important 라고 붙여둔 속성은 상속이나 우선순위를 무시하고 적용된다.
결과를 보면 !important 라고 붙여둔 속성은 어디서 지정했던지 간에 무조건 적용됨을 볼 수 있다.
당연히 함부로 남발하다간 더 골치아파질 수 있으니 적당히 사용하는게 좋다.
참고로 !important 마져 중복되었을 경우에는 나중에 정의 된게 적용된다.
