조건부 주석

조건부 주석이란 HTML을 이용해 웹 사이트를 마크업할 때에 크로스 브라우징을 할 경우에 HTML의 주석 태그를 이용하여서 인터넷 익스플로러에 대해 적용하기 위한 특수한 형식의 주석이다.

조건부 주석 사용 예제

다음은 조건부 주석을 사용하여 마크업한 예제이다.

<!--[If IE 6]>
    <script type="text/javascript">
        alert("Please Upgrade Your BROWSER !");
    </script>
<![endif]-->

조건부 주석 사용을 위한 문법

주석의 형식	문법에 맞게 마크업한 예제
표준적인 주석의 형식	<!-- 주석의 내용-->
조건부 주석 미지원 브라우저에 대해서 조건부 주석을 표시하지 않는 형태	<!--[If 조건]> 마크업할 내용 <![endif]-->
조건부 주석 미지원 브라우저에 대해서 조건부 주석을 그대로 출력하는 형태	<![If 조건]> 마크업할 내용 <![endif]>

조건부 주석을 이용하면 주석 내부에 있는 내용은 지원하는 브라우저에서 조건이 참이면 마크업된 내용은 브라우저에 렌더링된다. 다음은 조건부 주석을 사용하기 위하여 조건부 주석의 조건에 대해서 안내한 표이다.

조건의 내용	예제	조건에 대한 설명
IE	[If IE]	버전의 높고 낮음을 막론하고 모든 버전의 IE에 대해서 참 값을 가지게 하는 조건이다.
IE Version	[If IE 7]	특정 버전의 IE에서만 참 값을 가지게 하는 조건이다.
WindowsEdition	[If WindowsEdition]	윈도우에서 구동하는 IE라면 참 값을 가지게 하는 조건이다.
WindowsEdition Version	[If WindowsEdition 1]	특정 버전의 IE에서만 참 값을 가지게 하는 조건이다.
true	[If true]	항상 참 값을 가진다.
false	[If false]	항상 거짓 값을 가진다.

조건부 주석은 위의 표에 나열된 조건 외에도 세부적인 조건을 사용할 수가 있다. 다음은 그러한 조건들에 대하여 안내한 표이다.

조건의 내용	예제	조건에 대한 설명
!	[If !IE]	IE가 아닐 경우에 참 값을 가진다.
lt	[If lt IE 9]	이 조건은 버전 값을 항상 필요로 하며 해당 버전 미만의 버전의 IE에서 항상 참 값을 가진다. (lt = less than)
lte	[If lte IE 9]	이 조건 역시 버전 값을 항상 필요로 하며 해당 버전 이하의 버전에서 항상 참 값을 가진다. (lte = less than or equal)
gt	[If gt IE 6]	이 조건은 버전 값을 항상 필요로 하며 해당 버전을 초과하는 버전의 IE에서 항상 참 값을 가진다. (gt = greater than)
gte	[If gte IE 6]	이 조건 역시 버전 값을 항상 필요로 하며 해당 버전 이상의 버전의 IE에서 항상 참 값을 가진다. (gte = greater than or equal)
()	[If !(IE 7)]	세부적인 표현을 위한 형식이다. 수학의 계산과 프로그래밍과 동일하게 괄호 안의 표현식부터 먼저 처리된다.
&	[if (gt IE 5)&(lt IE 7)]	프로그래밍에서의 &&와 동일하게 "그리고"를 의미한다.
\|	[if (IE 6)\|(IE 8)]	프로그래밍에서의 \|\|와 동일하게 "또는"을 의미한다.

자바스크립트를 이용한 조건부 주석

Internet Explorer 4 이상에서는 자바스크립트를 이용한 조건부 주석을 지원한다. 다음은 그에 대한 예제이다.

<script type="text/javascript">
/*@cc_on
    var Text = "당신은 IE 4 또는 그 이상의 버전을 사용중이군요 !";
    document.writeln(Text);
@**/
</script>

다음은 IE의 Javascript 처리 엔진의 버전을 이용한 기법이다. 다음에 나오는 스크립트는 윈도우 XP 서비스 팩 3에서의 IE 6일 경우의 엔진 버전이다.

@_jscript_version == 5.7

다음은 모든 버전에 IE에 적용하기 위하여 엔진의 버전을 이용하여 표현한 방법이다.

<script type="text/javascript">
/*@cc_on
  @if (@_jscript_version == 10)
    document.write("IE 10");
  @elif (@_jscript_version == 9)
    document.write("IE 9");
  @elif (@_jscript_version == 5.8)
    document.write("IE 8");
  @elif (@_jscript_version == 5.7 && window.XMLHttpRequest)
    document.write("IE 7");
  @elif (@_jscript_version == 5.7 && !window.XMLHttpRequest)
    document.write("IE 6"); // 엔진의 버전은 올라갔으나 엔진 내에 Ajax를 위한 기본 객체가 없는 경우이므로 IE 6에 해당한다.
  @elif (@_jscript_version == 5.6)
    document.write("IE 6");
  @elif (@_jscript_version == 5.5)
    document.write("IE 5.5");
  @else
    document.write("IE 5.5 이하의 버전의 브라우저를 사용중입니다. 업그레이드를 권장합니다.");
  @end
@*/
</script>

같이 보기

CSS 핵