리뷰

(kjy2143) — Fri, 25 Apr 2008 01:13:02 +0900

XHTML 핵

(kjy2143) — Mon, 25 Sep 2006 16:50:24 +0900



<!--[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 바로 다음에 버전을 넣어주면 됩니다



<!--[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 에서만 보입니다.

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



<!--[if !IE 5.0]>

<h1>모든 브라우저에서 보이지만 ie5.0에서만 안보입니다.</h1>

<![endif]-->

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

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



<!--[if  gte IE 5.5]>

<style type="text/css">

	.h2 { font-size: 1.2em;}

</style>

<![endif]-->

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

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