IE Hacks

표준을 구연하는데에 쓰이는 해킹, 핵을 쓰는것이 CSS 이던 XHTML 부분이던 과연 좋은것인지 안좋은 것인지는 개개인의 판단과 기준에 따라서 바뀌는 부분입니다. 하지만, 아직 완벽하지 않은 표준의 태두리에서 그 태두리 안에 들어가기 위해서는 어쩔수 없는 부분일 수도 있겠습니다.

핵 사용의 정당성

WebGraphics는 이렇게 정의합니다

A hack is a way to fool browsers.
-핵은 브라우저들을 놀리는 방법이다. (각 브라우저가 어떤부분이 약한지를 알아서 그 부분을 꼬아서 편법을쓴다고 해석할수 있슴)
A workaround is a way to fool rendering problems, and minimize the affected browsers.
-workaround, 즉 막노동, 뺑 돌아가는 일을 사용하여 렌더링 문제를 꼬는 방법으로 영향받는 브라우저가 적게한다. (CSS 자체가 어떻게 행동하는지를 더 자세히 코딩하여 제어함으로 브라우저가 읽을시에 오해가 적도록 하게하는법. 예로 3+2=5 라고 표현하는 부분이 오해가 생길만 하다면 1+1+1+1+1=5 라고 지정해 주는것이 되겠슴)

그리고 WebGraphics 블로그에서는 3가지 과정을 통해 핵을 사용하도록 권하더군요.

1. If we know a bug, we can sometimes prevent it - 버그를 알고 있으면 가끔은 미리 예방을 할수 있다.
2. If it isn’t possible, we can use a workaround - 그것이 가능치 않다면 막노동이지만 더 자세히 표현하여 막는다.
3. If we tried everything without success, we can use a hack - 이 모든것들을 해 보아도 되지 않을시에 비로소 핵을 고려해 본다.

제가 여러포스팅을 통해 CSS 핵을 소개해 드렸지만 workaround 될만한 것들도 나눌수 있었으면 좋겟네요. 참 많이 배우고 느낄만한거 같습니다. 일단 핵의 사용과 그것의 목적등을 나누고 싶었습니다.

아무튼 이번것은 workaround가 아닌 핵입니다만, 이것은 css 핵이 아닌 xhtml 핵입니다. 마이크로소프트에서 이 부분이 가능하도록 배려(?) 해주었네요. 기본 형식은 이러합니다.

IE 핵의 기본형식

<!--[if IE]> <link type="text/css" media="screen" href="style.css" /> <! [endif] -->

“IE 일때는 style.css 를 읽어라” 라는 뜻입니다. 아시다시피 xhtml 의 코멘트는 <!– 으로 시작합니다. 그리고 코멘트가 끝날때에는 –> 로 끝이나죠. 이 사이에 [if IE], [endif] 등을 넣어서 핵으로 인식되도록 하는 방법입니다.

<!--[if IE]> <style type="text/css"> #content { width: 550px;} </style> <![endif]-->

IE는 박스모델의 문제가 있으니 IE에서만 읽을수 있도록 content 라는 id 의 div 를 550px 로 설정해 준 부분입니다. 물론 이부분은 xhtml 안에 들어가는 부분입니다.

저것은 모든 IE 를 통틀어 지정해 주는 부분이고 버전에 따라서 지정을 해줄수 있습니다.

IE 버전에 따라 지정

IE 바로 다음에 버전을 넣어주면 됩니다

<!--[if IE 5.0]> <h3>THIS IS IE 5.0</h3> <![endif]-->

위의 <!–[if IE 5.0]> 부분에 IE 뒤에 5.0 이 버전을 나타냅니다. 6.0 이 될수도 있고, 5.5 도 될수 있겠네요. “THIS IS IE 5.0″ 부분은 인터넷익스플로러 5.0 에서만 보입니다.

IE 의 특정 버전만 선택하지 않기

불린Boolean 의 ! 느낌표를 써주어 부정을 넣을수 있습니다.

<!--[if !IE 5.0]> <h1>모든 브라우저에서 보이지만 ie5.0에서만 안보입니다.</h1> <![endif]-->

if IE 사이에 느낌표 ! 가 들어가서 if !IE 가 되면 뒤에나온 버전만 빼달라는 것입니다.

IE 버전들을 포괄적으로 선택하기

버전들을 포괄적으로 선택이 가능합니다. 버전 5.5 이상, 버전 6.0 이하 이런식으로 말이죠. 그리 어렵지는 않습니다.

<!--[if gte IE 5.5]> <style type="text/css"> .h2 { font-size: 1.2em;} </style> <![endif]-->

gte 라는 부분이 IE 와 버전 사이에 들어가 있습니다. if 구문 다음에 들어갔습니다. 이 gte 는 “Greater Than or Equal to” 를 줄인것으로 이상 을 뜻합니다. 즉 5.5 도 포함해서 그 이상이죠. 이 말고도 gt, lt, lte 가 있습니다.

gt	greater than - 그보다 높은버전	if IE gt 5.0 은 5.0보다 높은, 5.1부터 그 이상
gte	greater than or equal to-그 이상.	if IE gte 5.0 은 5.0을 포함한 그 이상.
lt	less than - 보다 낮은 버전.	if IE lt 6.0 - 6.0보다 낮은 버전들. 5.5 5.0등
lte	less than or equal to - 그 이하버전	if IE lte 5.5 - 5.5을 포함한 이하버전

버전을 직접 정하는 것보다 이렇게 포괄적으로 선택하는것이 더 나은 방법일겁니다. 특히 3px 버그나 박스모델 버그는 <!–[if lte IE 5.5]> 를 써 주어 5.5 이하버전들을 선택해 주면 되겠네요.

표준을 위한 핵. 그것은 편법입니다. 편법을 많은곳에서 사용은할수 있지만 권장하는 방법은 아닙니다. 하실수 있다면 그 문제를 돌아서 가더래도 핵이아닌 방법으로 해결하시면 좋겠습니다. padding 보다는 margin 의 사용을 늘린다던지 하는 방법이 그리합니다. 또한 그것이 안될경우 사용해 볼수 잇는 여러 workaround를 곧 나눌수 있으면 좋겠네요.

IE conditional comment hack 참고:
http://www.quirksmode.org/css/condcom.html
http://virtuelvis.com/archives/2004/02/css-ie-only
CSS hacks and filters

CSS2, XHTML | Trackback