CSS 핵(hack)과 필터(filter)
필터(filter)는 브라우저에 따라서 적용되거나 또는 다른게 표현할수 있도록하는 것이다. 예로 익스플로어의 경우는 몇몇 CSS 속성 선택자를 지원하지않으나 다른 브라우저의 경우는 적용된다.이런점으로 브라우저별로 별도의 특성을 부여하는것이다. 핵은 이런 필터와 흔히 같이생각하는데 다르다.핵(hack)의 의미는 브라우저의 관계없이 원하고자 하는 대로 나올수 있도록 사용하는것이 핵이다.
필터에 대한 정보는 아래 사이트에서 자세히 볼수있다.
필터 : 익스플로어 조건 주석문
익스플로어 (IE)에는 문제가 많다 앞서 여러개의 css예제를 들면서 IE에서는 적용안된다고 한적있듯이 이때 IE의 경우 별도 지정해 줄 수 있다. 조건주석문의 사용이다. 만약 IE6일 경우 다르게 할려면 다음과 같이 한다.
<!-- [ if IE 6 ]
<style type="text/css">
어쩌고 저쩌고.......
</style> -->
자식,속성 선택자 필터
IE6에서는 자시,속성 선택자를 지원하지않는다. 이점을 이용해서 필터로 걸러낼 수 있다.예제를 보자 IE6에서는 투명이미지png-24를 지원하지않는경우를이용해 사용한예다
html>body{
background: url(png24.png) no-reapeat 0 0;
}
위와 같이 하면 IE6에는(IE6가 자식 선택자를 지원하지않으니까) body에 png이미지가 적용되지않는것이다
이번에는 속성 선택자의 예를보자 아이디의 이름이 content인 div엘리먼트에 png이미지를 적용해볼것이다
div[id="content"]{
background: url(png24.png) no-reapeat 0 0;
}
* html
* html의 경우는 IE6이하에서만 적용된다.
*html{ font-size:small;}
이와 같이 하면 IE6이하에서 폰트사이지가 small로 적용될 것이다. 문제는 css표준에 어긋난다는 점이있다.
!important
!important 사용에 대해서는 미리 설명한적있다 다음 링크를 참조하자
CSS 브라우저에 따른 이미지 선택 !important
인접선택자 핵
이핵은 IE6이하에서 특별 스타일을 감추는데 사용된다. 인접형태 선택자를 이용한점이다.잘알다시피 문서구조에서head다음에 html오게된다는점을 이용한 것이다.
head:first-child+body{
background:url(png24.png) no-repeat 0 0;
}
위에서 first-child는 head다음오는것이므로 html이고 여기에 인접선태자'+'를이용하여 body를 지정하는것이다.하지만 IE6는 인접선택자를 인식못하기에 이스타일이 감쿼지는것이다.
지금까지 필터와 핵의의미 그리고 사용사례들을 찾아봤다. 유효성 검사에 걸리지않기위해서는 가급적 사용하지않는것이 좋다. 다음에는 각종 버그에 대해 알아보겠다
댓글