[CSS]IE6 스타핵에서 띄어쓰기

크로스브라우징을 위해 CSS hack 를 사용할때가 종종 있습니다.

IE6 용으로는 스타핵을 사용합니다. ex)* #footer
어떤사람은 *html 이렇게 붙혀서 사용하고, 또 어떤사람은 * html 이렇게 띄어서 사용합니다.
과연 차이점이 뭘까요?

http://jigsaw.w3.org/css-validator/

위에서 CSS 체크를 해보면 *html 는 error 로 잡고, * html 은 error 로 잡지 않습니다.
하지만, IE6에서 결과값은 같습니다.

'CSS 마스터 전략' 에서는 * html 이렇게 띄어쓰는걸로 나와있습니다.

그렇다면 에러로 안잡는 * html 요게 맞다는 얘기인데..
마찬가지로 IE6 전용 '언더바핵'도 error 로 잡습니다. ex)_margin:10px;
언더바핵보다는 스타핵이 소스가 조금더 길어진다는 부분을 빼고는 스타핵을 사용하는게 더 좋을듯 싶네요.
제일 좋은건 핵을 사용안하는것과 IE6이 세상에 없어지는게 베스트긴 하겠지만요.^^

핵을 사용할때도 정확히 알고 사용해야겠다는 생각이 드는군요..
여러분들은 어떻게 사용하셨나요?

[CSS]CSS hack 정리

CSS hack 이란?
브라우저의 구현 차이나 버그를 이용하여 CSS의 적용대상에서 일부 브라우우저를 제외하거나, 특정 브라우저만을 대상으로 CSS를 적용하는 방법을 'CSS핵' 이라고 합니다.
크로스브라우징을 위한 응급대처 같은 방법이라고 생각하시면 되고, 핵일부는 CSS의 문법상 올바르지 않은 것도 있을 수 있습니다.

여러 핵들이 있지만, 자주 사용하는 핵을 살펴보겠습니다.

 

1. 스타핵 (star hack)

셀렉트 앞에 *html  을 붙히며 Win IE 4~6, Mac IE 4~5 등에 스타일이 적용되며 다른 브라우저에는 적용되지 않습니다.

 

*html p{ padding:3px; } /* 맨앞에 *html 을 붙혀줍니다. */

2. 언더스코어 핵 (underscore hack)

속성의 가장 앞부분에 언더스코어(_)를 붙이며 Win IE 4~6 등에서 스타일이 적용되고 다른브라우저에서는 적용되지 않습니다.

 

p { _padding:3px; } /* padding 앞에 _ 를 붙혀줍니다. */ 

 

3. 해시 핵 (hash hack)

속성의 앞에 # 를 붙이며 Win IE 4~6, Mac IE 5, Opera 7, Mozila, Firefox 등에 스타일이 적용되고 다른 브라우저에는 적용되지 않습니다. (CSS의 문법상 속성의 앞에 #를 두는 것은 문법적으로 바르지 않습니다.)

 

p { #padding:3px; } /* padding(속성) 앞에 #를 붙힙니다. */

 

4. 스타 7 핵 (star 7 hack)

셀렉트 앞에 html* 를 붙이며 Win IE 5.5~6, Map IE 5, Safari 등에서 스타일이 적용되고 다른 브라우저에서는 적용되지 않습니다. html* 과 선택자 사이에 공백을 두시면 안됩니다.

 

html*p { padding:3px; } 

 

5. IE7 전용핵

셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용이 됩니다.

 

*:first-child+html p { padding:3px; }

 

<추가>
구글의 크롬 브라우저가 출시되었습니다. 사파리 엔진을 사용했더군요.. 그래서 사파리용 핵은 아래와 같이 적용하시면됩니다.

 

body:first-of-type

 

ex) body:first-of-type #wrap

 

이밖에도 브라우저 배제를 위한 핵과 박스모델 핵 패스필터 등이 있지만, 제가 주로 사용하는 핵을 위주로 적어봤습니다.

hack 을 자주 사용하면 새로운 브라우저에 영향을 끼칠수도 있으며, 업무효율을 떨어뜨리는 요인이 될수도 있으니, 응급대처 방법이라고 생각하시고 사용하시는게 올바른 판단이라고 생각됩니다.