웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
인터넷 익스플로러 핵이란?
인터넷 익스플로러(이하 익스 또는 IE)의 CSS 핵(CSS hack)이란 브라우저마다 달리 적용되는 스타일을 통일할 수 있도록 익스에만 스타일을 적용할 수 있게 하는 스타일 지정 방법을 의미합니다... 물론 익스 뿐만 아니라 거의 모든 브라우저들에 개별적으로 적용 가능한 핵이 존재합니다... 하지만 익스는 약간 특별하죠...
익스가 특별한 이유...
최근의 익스플로러의 경우는 그런 것은 아니지만 예전의 버전들... 특히 익스 8(IE 8) 이하에서는 익스에서만 스타일이 지정되지 않거나 다른 속성 명령어를 사용해야 스타일이 적용되는 경우가 많습니다... 그래서 상대적으로 익스 핵이 많이 쓰이는 이유입니다... 또한 다른 브라우저는 업데이트가 간편하고 대부분 자동으로 되는 반면 버젼별로 거의 별도 프로그램처럼 실행되죠.
어찌되었건 홈페이지를 구축할때 QA 또는 크로스 브라우징 단계에 익스플로어만을 수정하기 위한 핵을 사용하는 것은 아직은 피할 수 없는 일이죠... 또 굉장히 중요하구요. 그럼 익스 핵에 대하여 좀 더 알아볼까요?
! 인터넷 익스플로러 핵 사용방법 보기
익스플로러 핵은 굉장히 다양합니다. 그 중에서도 가장 많이쓰이는 것 위주로 적어보겠습니다. 대부분 아래 핵을 사용하면 수정이 가능하답니다!
<style type="text/css">
.test { _font-size:10px; }
// 오직 IE6에서만 가능함
*:first-child + html .test { font-size:10px; }
// *:first-child + html 뒤에 적용 태그를 입력, IE 7만 가능
.test { *font-size:10px; }
// IE6, 7, 8에서 가능
.test { font-size:10px9; }
// IE8, 9, 10에서 가능
.test { font-size:10pxIE8+9; } // 원하는 버젼을 임의로 지정이 가능함
</style>
.test { _font-size:10px; }
// 오직 IE6에서만 가능함
*:first-child + html .test { font-size:10px; }
// *:first-child + html 뒤에 적용 태그를 입력, IE 7만 가능
.test { *font-size:10px; }
// IE6, 7, 8에서 가능
.test { font-size:10px9; }
// IE8, 9, 10에서 가능
.test { font-size:10pxIE8+9; } // 원하는 버젼을 임의로 지정이 가능함
</style>
위 예제들은 폰트 사이즈를 예로 들었습니다. 버젼에 따라 조금씩 코드가 달라 브라우저 버젼에 맞는 핵을 사용해야 합니다.
참고로 * 기호를 사용하는 핵이 적용 안되는 경우가 발생합니다. 만약 IE 8만 수정하려 한다면 아래와 같이 hack을 사용할 수 있습니다. 아래처럼 사용한 후 잘 적용됨을 확인했습니다. IE 8만을 위한 또 다른 핵사용 방법입니다.
<style>
/* Only IE 8 works */
.test {
font-size: 10px \\0;
}
</style>
/* Only IE 8 works */
.test {
font-size: 10px \\0;
}
</style>
아래의 글도 찾고 계시지 않나요?
