조건부 주석(Conditional comments) 사용하기

흔히 소스코드에 "주석을 단다"라는 표현을 많이 씁니다.

소스코드상에 코드를 설명할 수 있는 문구를 적어놓는 행위를 "주석을 단다" 라고 하는데요.

주석이란 소스코드에 어떠한 내용을 입력하지만 그 내용이 실제 프로그램에 영향을 끼치지 않는 것을 말합니다.


언어별로 그 형태가 조금씩 다릅니다.

HTML의 경우는


<!-- 주석 -->


이런 형태로 작성하게 됩니다.



이 포스팅에서는 조건부 주석에 대해 설명을 해드릴텐데요.

조건부 주석(Conditional comments)이란 IE(Internet Explorer)에서만 작동하는 주석입니다.

주석이면 주석이지 "조건부" 라는 표현을 넣는 것은

바로 특정 조건을 정하여 특정한 조건하에서 작동하는 주석이라는 의미입니다.


가장 간단한 조건부 주석의 예를 들어보겠습니다.

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->



전체적인 형태로 놓고보면

<!-- 로 시작하여 --> 로 끝나는 HTML의 주석 형태입니다.

즉 브라우저상에서 주석은 무시되고 렌더링이 되지 않습니다.

하지만 위의 조건부 주석은 IE6에서만 주석 안의 내용이 렌더링(실행) 되는 조건부 주석입니다.



좀 더 다양한 예를 들어보겠습니다.




<p class="accent">
<!--[if IE]>
조건부 주석에 따르면 이것은 IE 입니다<br />
<![endif]-->
<!--[if IE 6]>
조건부 주석에 따르면 이것은 IE 6 입니다<br />
<![endif]-->
<!--[if IE 7]>
조건부 주석에 따르면 이것은 IE 7 입니다<br />
<![endif]-->
<!--[if IE 8]>
조건부 주석에 따르면 이것은 IE 8 입니다<br />
<![endif]-->
<!--[if IE 9]>
조건부 주석에 따르면 이것은 IE 9 입니다<br />
<![endif]-->
<!--[if gte IE 8]>
조건부 주석에 따르면 이것은 IE 8 이거나 버전이 더 높습니다<br />
<![endif]-->
<!--[if lt IE 9]>
조건부 주석에 따르면 이것은 IE 9 보다 버전이 낮습니다<br />
<![endif]-->
<!--[if lte IE 7]>
조건부 주석에 따르면 이것은 IE 7 보다 버전이 낮거나 같습니다<br />
<![endif]-->
<!--[if gt IE 6]>
조건부 주석에 따르면 이것은 IE 6 보다 버전이 높습니다<br />
<![endif]-->
<!--[if !IE]> -->
조건부 주석에 따르면 이것은 IE가 아닙니다<br />
<!-- <![endif]-->
</p>


이렇게 각 버전별로도 조건을 걸수도 있고,

몇 버전 이상, 또는 몇 버전 이하에서만 작동하도록 조건부 주석을 설정할 수 있습니다.


눈썰미 있게 문법을 보시면 if는 조건문의 시작을 의미하고

IE6,7,8 등의 버전 표시가 나오고

if와 버전을 나타내는 글자 사이에 lt, gt, lte 등의 문법이 나오는 것을 발견하실 수 있을겁니다.



여기서 나타내는 문법은

gt 는 부등호 >(크다) 과 같습니다.
lt 는 부등호 <(작다) 과 같습니다
e 는 부등호 =(같다) 과 같습니다.


즉

<!--[if gte IE 8]>
조건부 주석에 따르면 이것은 IE 8 이거나 버전이 더 높습니다<br />
<![endif]-->

은 IE8 보다 크거나 같을때


<!--[if lt IE 9]>
조건부 주석에 따르면 이것은 IE 9 보다 버전이 낮습니다<br />
<![endif]-->

은 IE9보다 작을때


<!--[if lte IE 7]>
조건부 주석에 따르면 이것은 IE 7 보다 버전이 낮거나 같습니다<br />
<![endif]-->

은 IE7보다 작거나 같을때 그 안의 내용이 실행되게 됩니다.




실전에서 사용할때는 보통

<link rel="stylesheet" href="default.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" href="ie8.css" type="text/css" />
<![endif]-->


이렇게 적용하여

기본적으로 default.css를 불러오되

ie6에서는 ie6.css를 추가로 불러오고
ie7에서는 ie7.css를 추가로 불러오고
ie8에서는 ie8.css를 추가로 불러오도록

선언합니다.

IE6,7,8 각각의 브라우저에 대한 미세한 픽셀조정이나,

디자인이 조금씩 달라지는 부분을 각각의 CSS파일에 담아 적용시키는 것이지요.



조건부 주석에 대한 더 많은 내용을 검색해보고자 하는 경우에는

영어로 "conditional comments" 로 구글링하시면 많은 자료를 찾아보실 수 있습니다.

 *참고자료
http://www.quirksmode.org/css/condcom.html