• 회원가입
  • 로그인
  • 구글아이디로 로그인

[intro] HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)

목차

  1. IE 조건부 주석 정의
  2. IE 조건부 주석 구문
  3. 주석 코드 기호 의미
  4. IE 조건부 주석 예제
  5. JS 조건부 주석

※ 주의: IE 10부터 조건부 주석 작동 X. (IE버전 체크 함수는 위 링크 참조.)

 

IE 조건부 주석 정의 

 
 ie(익스플로러)에서만 해석해 실행시키는 주석.
(타 브라우저는 주석으로 인식해 실행시키지 않음)
 
 ※ 익스플로러 구 버전에서도 같은 화면을 구현 (=크로스 브라우징)하기 위한 조치.
 ※ IE10 표준 모드에서 조건부 주석은 지원되지 않고, JScript 조건부 주석은 지원.
 
 

IE 조건부 주석 구문

[방법1]
 
<!--[if 조건문]>
익스플로러에서 조건 맞을 경우 실행시킬 내용.
<![endif]-->
 

[방법2] 

 
<!--[if !IE]>-->
익스플로러가 브라우저가 아닌 경우 실행시킬 내용
<!-- <![endif]-->
 
 

주석 코드 기호 의미

 
  • (아니다)
  • lt (작다) ※ LT Less Than
  • lte (작거나 같다) LTE Less Than or Equal
  • gt (크다) ※  GT Greater Than
  • gte (크거나 같다) ※ GTE Greater Than or Equal
  • () (우선처리),
  • & (그리고),
  • |  (또는)  ※ Shift키 + \키 함께 눌러 입력    
 
 

IE 조건부 주석 예제

 
<!--[if ie 5]> 
IE 5일 경우 보일 내용 (homzzang.com) 
<![endif]-->
 
 
<!--[if ie 6]> 
IE 6일 경우 보일 내용 (homzzang.com) 
<![endif]-->
 
 
<!--[if ie 7]> 
IE 7일 경우 보일 내용 (homzzang.com) 
<![endif]-->
 
 
<!--[if ie 8]> 
IE 8일 경우 보일 내용 (homzzang.com) 
<![endif]-->
 
 
<!--[if ie 9]>
IE 9일 경우 보일 내용
 (homzzang.com) 
<![endif]-->
 
 
<!--[if !(ie 9)]>
IE 9 아니라면 보일 내용 (homzzang.com) 
<![endif]-->
 
 
<!--[if (gt ie 6)&(lt ie 9)]>
ie 6 보다 높고 ie 9 보다는 낮다면
 보일 내용 (homzzang.com) 
<![endif]-->
 
 
<!--  [if (ie 6)|(ie 9)]> 
ie 6 이거나  ie 9 라면 보일 내용 (homzzang.com) 
<![endif]-->
 
 
<!--[if lt ie 9]> 
IE 9 보다 낮다면 보일 내용 (homzzang.com) 
<![endif]-->
 
 
<!--[if lte ie 9]>
IE 9 보다 낮거나 같다면 보일 내용
 (homzzang.com) 
<![endif]-->
 
 
<!--[if gte ie 9]>
IE 9 이거나 높다면 보일 내용
 (homzzang.com) 
<![endif]-->
 
 
<!--[if gt ie 9]>
IE 9 보다 높다면 보일 내용
 (homzzang.com) 
<![endif]-->


<!--[if gt ie 9]><!--> 
IE9 보다 높은 경우 보일 내용 (주석 태그 살짝 다름) 
<!--<![endif]-->

 
<!--[if !ie]>--> 
IE가 아닌 경우 보일 내용 (주석 태그 살짝 다름) (homzzang.com)  
<!-- <![endif]-->
 
 
<!--[if (gt IE 9)|!(IE)]><!--> 
IE9 보다 높거나 IE 아닌 경우 보일 내용 (주석 태그 살짝 다름) 
<!--<![endif]-->
 
 
PS1.
조건부 주석 라인을 아래처럼 붉은색 추가해 주석처리 시,
ie 브라우저가 아닌 경우에만 non-ie.css 스타일시트를 적용 가능
 
<!--[if !ie]>--> 
<link href="non-ie.css" rel="stylesheet">
<!--<![endif]-->
 
 
PS2.
ie 9 보다 낮은 버전일 경우 
<!--[if gt ie 9]>끝나자 마자 바로 출력 시작해 -->가 출력되므로,
출력되지 않도록 주석처리하기 위해 <!를 넣어 주석처리한 것임.
 
<!--[if gt ie 9]><!-->
<link href="non-ie9.css" rel="stylesheet">
<!--<![endif]-->
 
 
 

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


<!--[if lt IE 7]>
<html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7">
<![endif]-->

<!--[if IE 7]>  
<html class="no-js lt-ie10 lt-ie9 lt-ie8">
<![endif]-->

<!--[if IE 8]>  
<html class="no-js lt-ie10 lt-ie9">
<![endif]-->

<!--[if IE 9]>
<html class="no-js lt-ie10">
<![endif]-->

 


<!--[if gt IE 9]><!--> <html class='no-js' prefix='og: http://ogp.me/ns#'> <!--<![endif]-->


<!--[if lte IE 9]>
<script>
window.onload = function(){
    location.href ='이동될주소'
}
</script>
<![endif]-->

 

출처: 네스트갤

 
[참고] 

JS 조건부 주석

익스플로러 4 이상부터 자바스크립트 조건문 주석을 지원. 
자바스크립트 조건부 주석 예문 보기 
 
  •  /**/ : 자바스크립트 안에서 여러 줄 주석 처리
  • //  : 자바스크립트 안에서 한 줄 주석 처리
  • @cc_on 은 조건부 주석의 시작 의미
  • @if, @elif, @else, @end등의 조건문 이용 가능
  • @_jscript_version  브라우저에 내장된 자바스트립트 엔진 버전 
  • @_win32 는 32비트인지를 나타냄.
 

PS. IE 전용 CSS 핵 - https://homzzang.com/b/css-338


분류 제목
style HTML - <header> 태그 ★ - 단락머리말 (= header태그 = 헤더태그 = 헤더요소) (HT…
deprecated HTML - <nobr> 태그 - 줄바꿈안하기 (= nobr태그 = 노비알태그)
table HTML - <tr> 태그 ★ - 테이블행 (= 테이블가로줄 = tr태그 = 티알태그) (HTML5수정)</…
meta HTML - <basefont> 태그 - 기본글자스타일 (기본글꼴/기본색상/기본크기) (= 베이스폰트태그) … 2
form HTML - <form> 태그 ★★★ - 입력폼양식 (= form태그 = 폼태그/폼요소) ※ 폼데이터 입력/…
form HTML - <datalist> 태그 - 입력가능값리스트 (= datalist태그 = 데이터리스트태그)
programming HTML - <noscript> 태그 - JS 작동안될때 보여줄 내용 (= noscript태그 = 노스크립트…
list HTML - <menu> 태그 - 명령어메뉴목록 (= menu태그 = 메뉴태그)
formatting HTML - <s> 태그 - 취소선 (= 취소태그 = s태그 = 에스태그 = 스트라이크쓰루태그) (HTML5…
form HTML - <label> 태그 ★ - input태그꼬리표 (= 인풋꼬리표 = 인풋명찰=인풋이름표 = lab…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
meta HTML - <base> 태그 - 상대주소기본URL과 링크기본타켓지정 (= base 태그 = 베이스태그)
formatting HTML - <del> 태그 - 텍스트삭제표시 (= del태그 = 딜태그|델태그|딜리트태그) ※ 삭제태그
frame HTML - <frameset> 태그 - 프레임그룹 (= 프레임 레이아웃 = frameset태그 = fram…
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
table HTML - <th> 태그 ★ - 테이블셀제목 (= th태그 = 티에이치태그) + th고정 (= 테이블헤드고…
font HTML - <sub> 태그 ★ - 아래첨자 (= 하단작은글씨 = sub태그 = 서브태그)
table HTML - <col> 태그 - 테이블열그룹 (= col태그 = 콜태그) (HTML5 수정)
table HTML - <table> 태그 ★ 테이블 (= 표작성 = table태그 = 테이블태그) ※ 셀병합 (= 셀…
table HTML - <td> 태그 ★ - 테이블 데이터 셀 (= 테이블셀 = td태그 = 티디태그) (HTML5수정…
15/18
목록
찾아주셔서 감사합니다. Since 2012