웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] CSS 핵 적용방법 (CSS Hack) 안내 본문

웹프로그램밍 자료실/HTML 자료

[해피CGI][cgimall] CSS 핵 적용방법 (CSS Hack) 안내

해피CGI윤실장 2017. 6. 2. 09:14

CSS hack 이란?
브라우저의 차이나 버그를 이용해 일부 브라우저를 제외 또는 특정 브라우저를 대상으로 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 등에 스타일이 적용되고
다른 브라우저에는 적용되지 않습니다. (문법상 앞에 #를 두는 것은 바르지 않음)
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; }

 

홈페이지바로가기 

Comments