조건부 주석
"오늘의AI위키"의 AI를 통해 더욱 풍부하고 폭넓은 지식 경험을 누리세요.
1. 개요
조건부 주석은 웹 페이지에서 특정 브라우저, 특히 Internet Explorer(IE)의 버전에 따라 다른 콘텐츠를 표시하기 위한 HTML 마크업 기술이다. 조건부 주석은 두 가지 유형으로 나뉘는데, 다운레벨 숨김은 IE에서만 HTML 코드를 실행하고 다른 브라우저에서는 무시되며, 다운레벨 노출은 IE가 아닌 브라우저에서 HTML 코드를 노출하도록 설계되었다. 자바스크립트를 이용한 조건부 주석도 존재하며, IE 4 이상에서 `@cc_on` 지시자를 사용하여 조건부 컴파일을 활성화하고, IE의 자바스크립트 처리 엔진의 버전을 확인하여 특정 IE 버전에 따라 다른 동작을 수행할 수 있다. 하지만, Internet Explorer 11 표준 모드에서는 조건부 컴파일이 더 이상 지원되지 않는다.
더 읽어볼만한 페이지
- CSS - X11 색 이름
X11 색 이름은 X 윈도 시스템에서 사용되는 색상 체계로, 웹 브라우저에서 널리 사용되는 색상 표준이며, HTML 색상 정의와 차이를 보이고, 최근 릴리스에서는 W3C 정의도 지원한다. - CSS - CSS 애니메이션
CSS 애니메이션은 웹 페이지 요소에 애니메이션 효과를 부여하는 CSS 모듈로, 주요 웹 브라우저에서 지원되며 다양한 논란에도 불구하고 널리 사용된다. - 인터넷 익스플로러 - 인터넷 익스플로러 10
인터넷 익스플로러 10은 마이크로소프트에서 개발한 웹 브라우저로, 웹 표준 지원 강화, 터치스크린 환경에 최적화된 메트로 스타일 버전 도입, 플립 어헤드 기능과 Adobe Flash Player 통합 등의 새로운 기능을 제공했지만 현재는 지원이 종료되었다. - 인터넷 익스플로러 - VB스크립트
VB스크립트는 마이크로소프트에서 개발한 스크립트 언어로, 인터넷 익스플로러의 클라이언트 스크립트 언어 및 액티브 서버 페이지의 표준 언어로 사용되었으나, 윈도우 클라이언트 지원 중단 발표로 향후 윈도우 릴리스에서 제거될 예정이다.
| 조건부 주석 | |
|---|---|
| 설명 | |
| 유형 | 프로그래밍 언어 기능 |
| 목적 | 인터넷 익스플로러 특정 버전에서만 코드가 실행되도록 제어 |
| 작성자 | 마이크로소프트 |
| 도입 시기 | 인터넷 익스플로러 5 |
| 문법 | |
| 시작 태그 | |
| 조건 | IE (모든 버전의 인터넷 익스플로러) "IE 버전 번호 (예: IE 6, IE 7, IE 8)" gte IE 버전 번호 (지정된 버전 이상) lte IE 버전 번호 (지정된 버전 이하) gt IE 버전 번호 (지정된 버전 초과) lt IE 버전 번호 (지정된 버전 미만) !IE 버전 번호 (지정된 버전이 아닌 경우) |
| 예시 | |
| 사용 예시 | |
| 특정 CSS 스타일 적용 | |
| JavaScript 코드 실행 | |
| 특징 | |
| HTML5 파싱 | 인터넷 익스플로러 10부터는 표준 HTML5 파싱 방식으로 처리되어 조건부 주석이 더 이상 지원되지 않는다. |
| 다른 브라우저 | 다른 브라우저에서는 일반적인 HTML 주석으로 취급되어 무시된다. |
2. 조건부 주석 사용을 위한 문법
조건부 주석은 ``와 같은 형태로 사용된다. 조건부 주석에는 다운레벨 숨김(downlevel-hidden)과 다운레벨 노출(downlevel-revealed) 두 가지 유형이 있다.
조건부 주석의 조건에는 다음과 같은 내용을 사용할 수 있다.
| 조건 내용 | 예제 | 설명 |
|---|---|---|
| IE | [if IE] | 모든 버전의 IE에서 참이다. |
| IE Version | [if IE 7] | 특정 버전의 IE에서만 참이다. |
| WindowsEdition | [if WindowsEdition] | 윈도우에서 구동하는 IE라면 참이다. |
| WindowsEdition Version | [if WindowsEdition 1] | 특정 버전의 윈도우에서만 참이다. |
| true | [if true] | 항상 참이다. |
| false | [if false] | 항상 거짓이다. |
조건부 주석에서는 위의 조건 외에도 다음과 같은 연산자를 사용하여 세부적인 조건을 지정할 수 있다.
| 연산자 | 예제 | 설명 | |
|---|---|---|---|
| ! | [if !IE] | IE가 아닐 경우에 참이다. | |
| lt | [if lt IE 9] | 버전 값을 필요로 하며, 해당 버전 미만의 IE에서 참이다. (less than) | |
| lte | [if lte IE 9] | 버전 값을 필요로 하며, 해당 버전 이하의 IE에서 참이다. (less than or equal) | |
| gt | [if gt IE 6] | 버전 값을 필요로 하며, 해당 버전을 초과하는 IE에서 참이다. (greater than) | |
| gte | [if gte IE 6] | 버전 값을 필요로 하며, 해당 버전 이상의 IE에서 참이다. (greater than or equal) | |
| () | [if !(IE 7)] | 괄호 안의 표현식부터 먼저 처리한다. | |
| & | [if (gt IE 5)&(lt IE 7)] | 프로그래밍에서 `&&`와 같이 "그리고"를 의미한다. | |
| > | >(IE 8)] | 프로그래밍에서 ` | `와 같이 "또는"을 의미한다. |
2. 1. 다운레벨 숨김 조건부 주석
`` 형태로 사용되며, 조건이 참인 IE 버전에서만 HTML 코드가 실행된다. IE가 아닌 다른 브라우저에서는 일반적인 HTML 주석으로 처리되어 무시된다.다음은 "다운레벨 숨김" 조건부 주석의 예시이다.
```html
```
이 예시에서 지시문은 IE 8이 지정된 CSS 파일을 읽도록 하는 반면, IE 7 이하 버전은 이를 무시한다. IE가 아닌 다른 브라우저도 표준 HTML 주석처럼 보이기 때문에 이를 무시한다.
```html
```
위의 예시는 IE 버전 5.0부터 7까지 내부 CSS 스타일을 읽도록 한다. 이 태그를 다르게 사용하면 IE 6, IE 5 또는 지정된 버전보다 최신(더 큼) 또는 구형(더 작음) IE 버전을 선택할 수도 있다.
조건부 주석의 구조를 이해하기 쉬운 간단한 예시는 다음과 같다.
```html
당신은 Internet Explorer를 사용하고 있지 않습니다.
```
조건부 주석에는 ''아래 계층이 보이는 것''과 ''아래 계층이 숨겨지는 것'' 두 종류가 있다.
각종 코멘트의 기본적인 문법은 아래 표와 같다. 처음에 놓인 코멘트는 비교를 위해 작성된 기본 HTML 코멘트이며, 각종 조건부 코멘트에서 사용되는 문법과의 차이점을 알기 쉽게 하기 위한 것이다.
| 코멘트 종류 | 문법과 취할 수 있는 값 |
|---|---|
| 표준 HTML 코멘트 | <!-- 코멘트 내용 --> |
| 아래 계층이 숨겨짐 | <!--[if expression]> HTML <![endif]--> |
| 아래 계층이 보임 | <![if expression]> HTML <![endif]> |
각 조건부 코멘트의 문법 블록 안에 있는 ''HTML''은 스크립트를 포함한 내용의 HTML 블록을 나타낸다. 양쪽 종류의 조건부 코멘트 모두에서, ''expression'' 부분의 조건식을 사용하여, 코멘트 블록 안에 있는 내용을 해석해야 할지 무시해야 할지를 지시하고 있다. 조건식은 피처, 연산자, 값을 조합하여 표현되지만, 피처마다 그 형식은 다르다. 지원되는 피처와 각 피처가 지원하는 값은 아래 표와 같다.
| 항목 | 예 | 설명 |
|---|---|---|
| IE | [if IE] | "IE" 문자열은 웹 페이지를 보는데 사용하고 있는 Internet Explorer 버전에 대응하는 피처이다. |
| 값 | [if IE 7] | 브라우저 버전에 대응하는 정수 또는 부동 소수점 수. 이 숫자가 브라우저의 버전에 일치할 때 true의 부울 값을 반환한다. 자세한 내용은 버전 벡터를 참조. |
| WindowsEdition | [if WindowsEdition] | Windows 7 상의 Internet Explorer 8. "WindowsEdition" 문자열은 웹 페이지를 보는데 사용하고 있는 Microsoft Windows의 에디션에 대응하는 피처이다. |
| 값 | [if WindowsEdition 1] | 웹 페이지를 보는데 사용하고 있는 Windows의 에디션에 대응하는 정수. 이 값이 사용되고 있는 에디션에 일치할 때 true의 부울 값을 반환한다. 지원되는 값과 그것이 나타내는 에디션에 관한 정보는 GetProductInfo 함수의 pdwReturnedProductType 인수를 참조. |
| true | [if true] | 항상 true로 평가된다. |
| false | [if false] | 항상 false로 평가된다. |
조건식을 만드는데 사용할 수 있는 연산자는 아래 표와 같다.
| 항목 | 예 | 설명 |
|---|---|---|
| ! | [if !IE] | NOT 연산자. 피처나 연산자나 부분식의 바로 앞에 놓여, 식의 부울 값을 반전시킨다. |
| lt | [if lt IE 5.5] | 작음 연산자. 첫 번째 인수가 두 번째 인수보다 작을 때 true를 반환한다. |
| lte | [if lte IE 6] | 작거나 같음 연산자. 첫 번째 인수가 두 번째 인수보다 작거나 같을 때 true를 반환한다. |
| gt | [if gt IE 5] | 큼 연산자. 첫 번째 인수가 두 번째 인수보다 클 때 true를 반환한다. |
| gte | [if gte IE 7] | 크거나 같음 연산자. 첫 번째 인수가 두 번째 인수보다 크거나 같을 때 true를 반환한다. |
| ( ) | [if !(IE 7)] | 부분식 연산자. 더 복잡한 식을 만들기 위해 부울 연산자와 조합하여 사용한다. |
| & | [if (gt IE 5)&(lt IE 7)] | AND 연산자. 모든 부분식이 true로 평가될 때 true를 반환한다. |
| > | (IE 7)] | OR 연산자. 부분식이 하나라도 true로 평가될 때 true를 반환한다. |
2. 2. 다운레벨 노출 조건부 주석
htmlHTML 코드
```
위 형태로 사용되며, 조건이 참인 경우에만 HTML 코드가 실행된다. 이 방식은 표준 HTML/XHTML 문법이 아니므로 주의해야 한다.[4] W3C 표준을 준수하기 위해 대체 기법을 사용할 수 있다.[5]
다음은 IE가 아닌 브라우저에만 CSS를 적용하는 예시이다.
```html
```
이 코드는 IE가 아닌 브라우저에서는 `non-ie.css` 파일을 적용하지만, IE에서는 조건이 거짓으로 평가되어 해당 코드를 무시한다. IE가 아닌 다른 브라우저에서도 이 태그를 인식하지 못하므로 무시된다.
조건부 주석의 구조를 쉽게 이해하기 위한 예시는 다음과 같다.
```html
당신은 Internet Explorer를 사용하고 있지 않습니다.
```
조건부 주석에는 '아래 계층이 보이는 것'과 '아래 계층이 숨겨지는 것' 두 종류가 있다. 기본적인 문법은 아래 표와 같다.
| 코멘트 종류 | 문법과 취할 수 있는 값 |
|---|---|
| 표준 HTML 코멘트 | <!-- 코멘트 내용 --> |
| 아래 계층이 숨겨짐 | <!--[if expression]> HTML <![endif]--> |
| 아래 계층이 보임 | <![if expression]> HTML <![endif]> |
조건식은 피처, 연산자, 값을 조합하여 표현되며, 지원되는 피처와 값은 다음과 같다.
| 항목 | 예 | 설명 |
|---|---|---|
| IE | [if IE] | 웹 페이지를 보는데 사용하고 있는 Internet Explorer 버전에 대응하는 피처. |
| 값 | [if IE 7] | 브라우저 버전에 대응하는 정수 또는 부동 소수점 수. 버전 벡터 참조. |
| WindowsEdition | [if WindowsEdition] | Windows 7 상의 Internet Explorer 8. 사용 중인 Microsoft Windows의 에디션에 대응하는 피처. |
| 값 | [if WindowsEdition 1] | 사용 중인 Windows 에디션에 대응하는 정수. GetProductInfo 함수의 pdwReturnedProductType 인수 참조. |
| true | [if true] | 항상 true. |
| false | [if false] | 항상 false. |
조건식을 만드는데 사용 가능한 연산자는 다음과 같다.
| 항목 | 예 | 설명 |
|---|---|---|
| ! | [if !IE] | NOT 연산자. 식의 부울 값을 반전. |
| lt | [if lt IE 5.5] | 작음 연산자. |
| lte | [if lte IE 6] | 작거나 같음 연산자. |
| gt | [if gt IE 5] | 큼 연산자. |
| gte | [if gte IE 7] | 크거나 같음 연산자. |
| ( ) | [if !(IE 7)] | 부분식 연산자. |
| & | [if (gt IE 5)&(lt IE 7)] | AND 연산자. |
| | | (IE 7)] | OR 연산자. |
Internet Explorer 4 이상에서는 JScript를 이용한 조건부 주석을 지원한다.[6][12] 이를 조건부 컴파일이라고도 한다.
3. 자바스크립트를 이용한 조건부 주석
다음은 조건부 주석을 사용하는 예제이다.
/*@cc_on
var Text = "당신은 IE 4 또는 그 이상의 버전을 사용중이군요 !";
document.writeln(Text);
@**/
`@_jscript_version` 변수를 사용하여 Internet Explorer 버전을 확인할 수 있다. 다음은 윈도우 XP 서비스 팩 3에서의 IE 6의 JScript 엔진 버전이다.
@_jscript_version == 5.7
마이크로소프트는 XP SP3에서 IE6의 JScript 엔진을 변경했기 때문에 위와 같이 표시된다.[14]
다음은 엔진 버전을 이용하여 모든 버전의 IE에 적용하는 방법이다.
/*@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
@*/
`@cc_on` 지시자를 사용하여 조건부 컴파일을 활성화하고, `@if`, `@elif`, `@else`, `@end`를 사용하여 조건을 설정할 수 있다.
다음은 좀 더 최신화되고 정리된 코드이다.
하지만, 조건부 컴파일은 Internet Explorer 11 표준 모드에서는 더 이상 지원되지 않는다.[8]
4. 조건부 주석 예제
html
당신은 Internet Explorer를 사용하고 있지 않습니다.
```
위 예시는 Internet Explorer를 사용하지 않는 경우에만 해당 문구가 표시되도록 하는 조건부 주석이다.[1]
다음은 조건부 주석을 사용하여 특정 버전의 IE에 따라 다르게 동작하도록 하는 예시이다.
```html
```
위 예시는 IE 8에서만 `ie8.css` 파일을 읽도록 지시한다. IE 7이나 그 이전 버전, 그리고 IE가 아닌 다른 브라우저들은 이 코드를 무시한다.[1]
```html
```
위 예시는 IE 5.0부터 7 버전까지 내부의 CSS 스타일을 읽도록 지시한다. `lte`는 '작거나 같음(less than or equal to)'을 의미한다. 이와 유사하게 `lt` (보다 작음), `gt` (보다 큼), `gte` (크거나 같음) 등을 사용하여 특정 버전보다 새롭거나 오래된 IE를 선택할 수 있다.[1]
참조
[1]
웹사이트
About Conditional Comments
https://web.archive.[...]
Microsoft Corporation
2007-10-24
[2]
웹사이트
HTML5 Parsing in IE10
http://blogs.msdn.co[...]
Microsoft Corporation
2011-07-06
[3]
웹사이트
GetProductInfo function (sysinfoapi.h)
https://learn.micros[...]
Microsoft Corporation
2023-02-02
[4]
웹사이트
MSDN — About Conditional Comments
https://web.archive.[...]
2007-01-03
[5]
웹사이트
Valid downlevel-revealed conditional comments {{pipe}} 456 Berea Street
https://web.archive.[...]
2007-12-29
[6]
웹사이트
Conditional Compilation
https://web.archive.[...]
Microsoft Corporation
2007-12-29
[7]
웹사이트
Conditional Compilation Variables
https://web.archive.[...]
Microsoft Corporation
[8]
웹사이트
"@cc_on Statement (JavaScript)"
https://web.archive.[...]
Microsoft Corporation
2015-08-17
[9]
문서
Internet Explorer 10 で廃止された機能
http://msdn.microsof[...]
[10]
웹사이트
MSDN — About Conditional Comments
https://web.archive.[...]
2007-01-03
[11]
문서
Valid downlevel-revealed conditional comments | 456 Berea Street
http://www.456bereas[...]
[12]
문서
Conditional Compilation
http://msdn2.microso[...]
[13]
문서
Conditional Compilation Variables
http://msdn.microsof[...]
[14]
문서
Detecting IE7+ in JavaScript
http://ajaxian.com/a[...]
본 사이트는 AI가 위키백과와 뉴스 기사,정부 간행물,학술 논문등을 바탕으로 정보를 가공하여 제공하는 백과사전형 서비스입니다.
모든 문서는 AI에 의해 자동 생성되며, CC BY-SA 4.0 라이선스에 따라 이용할 수 있습니다.
하지만, 위키백과나 뉴스 기사 자체에 오류, 부정확한 정보, 또는 가짜 뉴스가 포함될 수 있으며, AI는 이러한 내용을 완벽하게 걸러내지 못할 수 있습니다.
따라서 제공되는 정보에 일부 오류나 편향이 있을 수 있으므로, 중요한 정보는 반드시 다른 출처를 통해 교차 검증하시기 바랍니다.
문의하기 : help@durumis.com