html - 조건부 주석

조건부 주석이란 HTML을 이용해 웹 사이트를 마크업할 때에 크로스 브라우징(모든 웹 브라우저간에 동일한 페이지를 출력하기 위하여 마크업을 편집하거나 CSS의 핵을 이용하는 방법 등을 말한다.)을 할 경우에 HTML의 주석 태그를 이용하여서 인터넷 익스플로러에 대해 적용하기 위한 특수한 형식의 주석이다.

목차   [숨기기]  1 조건부 주석 사용 예제 2 조건부 주석 사용을 위한 문법 3 자바스크립트를 이용한 조건부 주석 4 함께 보기

[편집]조건부 주석 사용 예제

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

<!--[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 핵

출처 - http://ko.wikipedia.org/wiki/%EC%A1%B0%EA%B1%B4%EB%B6%80_%EC%A3%BC%EC%84%9D

---

IE 조건부 주석

Tip/Javascript / 2013/04/10 23:47

조건부 주석은 HTML 소스중 인터넷 익스플로러(ie)에서 해석되는 조건문 입니다.
구 버전의 ie에서 제대로 작동하지 않는 문제를 해결할 수 있습니다.
하지만 ie10 의 표준 모드에서 조건부 주석은 지원되지 않고, JScript 조건부 주석은 지원됩니다.

 

<!--[if condition]> 
HTML
<![endif]-->

 

위와 같은 구문으로 조건부 주석을 사용할 수 있으며, 조건(condition)을 만족할 경우 HTML을 렌더링하게 됩니다.
조건부 주석을 지원하지 않는 브라우저에서는 위 구문을 일반 주석문으로만 해석합니다.

 

condition에 사용되는 기호는 다음과 같습니다.
!(아니다), lt(작다), lte(작거나 같다), gt(크다), gte(크거나 같다), ()(우선처리), &(그리고), |(또는)

 

 

condition 예) 

[if !ie]	ie 가 아니라면
[if lt ie 8]	ie 8 이전버전 이라면
[if lte ie 8]	ie 8 이거나 이전버전 이라면
[if gt ie 8]	ie 8 이후버전 이라면
[if gte ie 8]	ie 8 이거나 이후버전 이라면
[If !(ie 8)]	ie 8 이 아니라면
[if (gt ie 6)&(lt ie 9)]	ie 6 이후버전 이고 ie 9 이전버전 이라면
[if (ie 6)|(ie 8)]	ie 6 이거나 ie 8 이라면

 

이 조건부 주석을 주석 처리하는 브라우저에 대하여 마크업을 넣으려면 다음과 같이 할 수 있습니다.

 

<!--[if !ie]>-->
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->

 

위와 같이 조건부 주석 라인을 주석처리 시키면 ie가 아닌 브라우저에 대한 css 를 적용할 수 있습니다.

 

만약 ie도 아니고 ie 9 이전 버전인 브라우저에 대하여 아래와 같이할 수 있습니다.

 

<!--[if gt ie 9]><!-->
<link href="non-ie9.css" rel="stylesheet">
<!--<![endif]-->

 

첫째줄 마지막을 ie가 아닌 타브라우저를 위해 <!--> 이 아닌 --> 로 입력한다면,
ie 9 이전 버전들은 <!--[if gt ie 9]> 구문이 끝나는 즉시 렌더링이 시작되므로 --> 부분이 브라우저에 표시될 것입니다.
이 부분을 주석시키기 위하여 --> 부분을 <!--> 로 변경한 것 입니다.

 

 

 

JScript 조건부 주석

 

JScript 안에서 사용할 수 있는 조건부 주석입니다.
ie 브라우저의 JScript engine 버전을 알 수 있는 방법입니다.
타 브라우저에 대한 처리도 가능합니다.

 

<script>
/*@cc_on
    @if (@_jscript_version >= 5)
        document.write("JScript Version 5.0 or better.<BR>");
    @else @*/
        document.write("You need a more recent script engine.<BR>");
    /*@end @*/
</script>

 

Jscript 안에서 /* */ 는 주석입니다.
@cc_on 은 조건부 주석의 시작을 나타냅니다.
@if, @elif, @else, @end 등의 조건문을 이용할 수 있습니다.
@_jscript_version 은 브라우저에 내장된 JScript engine 버전, @_win32는 32비트인지를 나타냅니다.

 

우리는 ie를 위하여 참 많은 노력이 필요합니다...

출처 - http://www.oops4u.com/1823

---

ie에서는 html의 일부분을 다른 모든 브라우져에서는 인식되지 않고 ie의 특정버젼에서만 인식되게 하는 기능이 있습니다.

조건부 주석의 내용은 다른 브라우져에서는 무시되고 주석의 형태에 따라 ie의 각 버젼에서만 인식됩니다.

조건부 주석은 html에서만 넣을 수 있지만, 스타일시트를 ie 특정버젼에서만 인식되게 하려면 html문서의 head안에 link 요소 앞에 조건부 주석을 넣으면 됩니다.

 

그럼 조건부 주석의 원리를 볼까요? html 주석의 형태는 다음과 같습니다.

 

<!--   이것을 주석입니다.            --> 

 

조건부 주석은 일반석 주석 문법에 추가적으로 인터넷 익스플로러에게 주석의 내용을 적용하거나 무시하라는 명령을 넣은 것입니다. 다른 브라우져는 일반 주석과 마찬가지로 이 조건부 주석을 무시하고 진행합니다. 조건부 주석은 html 주석의 시작 문법뒤에 대상 브라우져를 대괄호로 묶는 형태로 작성합니다. 예컨대 ie6만 대상으로 하려면 주석을 다음과 같은 형태로 작성해야 합니다.

 

<!-- [if IE 6] >

  <link rel="stylesheet" type="text/css" href="ie6style.css">

<![endif]-->

 

조건부 주석 안에 넣을 수 있는 대상은 다음과 같습니다.

 

*[if IE] - ie5 이상의 모든 버젼을 대상으로 합니다.(조건부 주석 기능은 ie5 버젼부터 생겼습니다.)

*[if IE 5],[if IE 7] 등 - ie 라는 글자와 버젼 숫자 사이에 빈칸이 있습니다, 이것은 특정브라우져 버젼 한개를 대상으로 합니다.

*[if gt IE 6] - gt는 초과라는 뜻입니다. 이 예는 ie6 초과 버젼을 대상으로 합니다.

*[if gte IE 7] - gte는 이상 이라는 뜻입니다. 이 예는 ie7 이상 버젼을 대상으로 합니다.

*[if lt IE 8] - it는 미만 이라는 뜻입니다. 이 예는 ie8 미만 버젼을 대상으로 합니다.

*[if lte IE 6] - lte는 이하 라는 뜻입니다. 이 예는 ie6이하 버젼을 대상으로 합니다.

 

조건부 주석은 html안에서만 사용할 수 있고 css에는 이런 식으로 조건에 따른 주석을 넣을 수 없습니다. 그래서 링크된 스타일 시트 안에는 다음과 같은 조건부 주석을 넣지 못합니다.

 

<!-- [if IE 6] >

  p {width:160px;}

<![endif]-->

출처 - http://siraon.com/xe/314