이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.
이글의 출처는 다음과 같습니다.
현재 대부분의 인터넷유저가 IE6이상, 파이어폭스, 사파리, 오페라 등을 사용한다고 보아도 무방하기때문에 IE5.x 에 적용되는 CSS 핵은 제외하였습니다. 즉, 버그많은 IE6의 버그들을 집중적으로 잡아낼수있는, IE6 용 CSS핵만 소개할까 합니다. :) 급하게 정리해서, 오류가 있을 수 있으니 브라우져버전이 잘못된것이나, 잘못설명된 것이 있으면 알려주세요.
스타핵 (* html 을 이용) 별표문자인 전체 선택자를 html 타입 선택자 앞에 오도록 해서 다른브라우져에서 적용되지 않지만 IE계열에서만 적용되는 스타일시트를 정의할 수 있습니다.
a:hover {border:1px;} // 모든 브라우져에서 적용됨
*html a:hover {border:2xp;} // IE 계열에서만 적용됨.
즉 위의 2줄을 적었을경우, IE계열에서는 border:2pxl 스타일이 적용됩니다. 이 스타핵은 IE7에서 적용되지 않습니다. 추가) IE7에서 적용되는 스타핵은 아래와 같습니다.
**html {border:2xp;} // IE7에서만 적용됨.
그렇다면, 모든 IE계열(7버전 포함)에서 동작하는 스타핵은 아래와 같이 하면 됩니다.
*html body, **html body {border:2xp;} // 모든 IE에서만 적용됨.
!important 핵 위의 스타핵은 IE6을 구분하기 위하여 2가지의 선언을 해야합니다. 그러나 한 규칙선언안에서 IE6 이하버전을 위한 선언과 다른 브라우저를 위한 선언을 하고 싶다면 !important 핵을 사용하면 됩니다.
#top {
position:fixed !important;
position:static;
}
IE6 버전에서는 한 규칙안에 여러개의 속성을 사용할 수 없으므로, 첫번째 선언을 무시하고 두번째 선언을 적용합니다. 나머지 브라우져에서는 important 키워드가 쓰여진 속성의 우선순위를 높게 인식하기때문에 첫번째 선언을 적용합니다.
언더바핵 가장 많이 알려진 CSS핵입니다. iE6이하 버전에서는 속성정의자의 _ (언더바)를 무시하고, 인식하는 점을 응용한 핵입니다.
.under {display:inline; _display:block}
두번째 정의된 display 의 _ (언더바)가 없다면, 모든 브라우져에서 display:block 이 적용될 것이나 _ (언더바)가 있기때문에 두번째 속성정의자는 IE6 이하 브라우져를 제외하곤 잘못된 속성정의자로 인식합니다. 따라서 IE6에서만 _display 를 display 로 인식하기때문에 display:block 속성이 적용됩니다.
이런 핵을 안쓰고 홈페이지를 만드는것이 가장 좋긴하겠지만, 그렇게 하려면 키보드를 집어던져버릴지도 모르기때문에, 적절한 핵 사용으로 스트레스 받는 일을 최소화 하시기 바라며...
덧붙여 어서 세상에서 IE6 이하 브라우져가 사라지기도 기원해봅니다.