본문으로 바로가기

IE 조건부 주석 (Conditional Comment)

category 웹코딩/HTML 2015.08.21 11:00

어딘가에 적어뒀다고 생각했는데 찾질 못해 새로 작성하는 글입니다. 아직도 크로스 브라우징을 위해 많이 사용되고 있습니다.

조건부 주석 소개

조건부 주석은 IE10 미만에서만 작동하는 조건문으로, 이를 이용하여 IE 브라우저별로 어떤 기능이나 파일, 디자인등을 삽입하는 용도로 자주 사용된다.

조건부 주석 기본 문법

아래와 같이 기본형에 알맞은 조건을 기입하고 이를 만족할 경우, HTML 코드를 렌더링하게 된다. 구문 처음의 <!-- 부분과 마지막 > 이 적용된 부분은 타브라우저에서 무시된다.

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

조건부

사용되는 기호는 :

  • ! : 아니다(not) - 예) [if !ie] ie가 아니라면
  • lt : 작다(less than) - 예) [if lt ie 9] ie9 보다 작다면
  • lte : 작거나 같다(less than equal) - 예) [if lte ie 8] ie8 보다 작거나 같다면
  • gt : 크다(greater than) - 예) [if gt ie 6] ie6 보다 크다면
  • gte : 크거나 같다(greater than equal) - 예) [if gte ie 7] ie7 보다 크거나 같다
  • () : 우선처리
  • & : 그리고(and) - 예) [if (gte ie 7)&(lt ie 9)] ie7 이상이고 ie9 미만이라면
  • | : 또는(or) - 예) [if (ie 7)|(ie 8)] ie7 이거나 ie8 이라면

조건부 주석 활용

브라우저 판별

과거 HTML5 Boilerplate에서 크로스 브라우징을 대비해 아래와 같은 조건부 주석을 사용했었다.

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="lt-ie9 lt-ie8 lt-ie7" lang="ko"> <![endif]-->
<!--[if IE 7]>         <html class="lt-ie9 lt-ie8" lang="ko"> <![endif]-->
<!--[if IE 8]>         <html class="lt-ie9" lang="ko"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ko"> <!--<![endif]-->
  • <html> 요소에 조건부 주석을 이용해 각각의 브라우저에 맞는 클래스명을 부여해서 이를 컨트롤하려는 방법이였다.
  • 마지막줄의 구문은 기존 구문과는 좀 다른데 이는 원래 조건에 부합하는 IE 버전과 타 브라우저들도 읽어 들여야 하는 부분을 동시에 만족하기 위해 --> 를 조건부 뒤에 추가하는 부분이다. 다만 조건에 못미치는 IE들은 이 조건부가 끝나는 즉시 렌더링되어 --> 부분을 화면에 표시하게 되기 때문에 이 부분을 주석처리하기 위하여 --> 부분을 <!-->로 변경하게 된다. 마지막 부분도 이와 동일한 이유다.
  • 유사한 방식으로, <body> 안에 특정 브라우저에 해당하는 문구만을 보여주기도 한다.

위 방식은 호환성보기에 대한 X-UA-Compatible 메타 태그에 오동작을 유발하기에 <head> 태그 이후에만 적용하는 것을 추천하고 있다.

스크립트의 분기

기능과 관련된 부분에서 구형 IE 브라우저에 필요한 기능을 대체하기 위한 방법으로도 자주 사용된다.

<!--[if lt IE 9]>
     <script src="js/html5shiv.min.js">
<![endif]-->

최근에는 IE8이하 버전에 대한 호환성이 제거되는 각종 라이브러리 및 프레임워크들이 증가하고 있다. 즉, IE9이상의 버전과 기타 최신 브라우저들만 지원하기에 구형 브라우저에선 오류를 발생시키거나 오작동을 유발하기에 이를 회피해야 한다.

<!--[if gte IE 9]><!-->
    <script src="js/iscroll.min.js"></script>
<!--<![endif]-->
  • 스크립트의 경우, 문서의 상단뿐만이 아니라 원하는 위치 어느 곳에나 삽입될 수 있다.
  • 스타일시트의 경우, <head> 안 쪽에 작성되어야 FOUC의 유발을 최소화 할 수 있다.



댓글을 달아 주세요

  1. K 2015.10.22 18:07 신고

    도움되는 글들이 많은것 같습니다. 잘보고 갑니다. 감사합니다!

  2. BlogIcon COCO Media 2016.04.09 01:52 신고

    IE10에서 사용하려면 https://github.com/Unk/IE-Checker JS 조건부 서식을 사용하는 방법 밖에는 없겠지요? ㅠ_ㅠ

    더찾아보니.. https://msdn.microsoft.com/ko-kr/library/121hztk3(v=vs.94).aspx IE11에서는 조건부 서식을 아예 지원하지 않는다고하네요;; 티스토리 공식 반응형 웹스킨에서보면 jQuery 1버전과 2버전을 IE 조건부 서식으로 구분해서 사용하게 해놓았는데.. 이게 익플11에서는 문제가 되지 않을까 걱정을 해보네요. ㅠ

    진짜 IE은 골치ㅠ인 것 같습니다. 크로스브라우징에 다맞추기가 정말힘드네요.

    • BlogIcon 흉내쟁이 2016.04.11 16:18 신고

      IE 브라우저 체크는 말씀하신 IE-Checker를 사용하셔도 됩니다만 최근에는 기능별로 구분하는 Modernizr 과 같은 방식이 추천됩니다.

      조건부 주석은 IE10 미만에서만 작동되고 링크하신 IE11 부분은 조건부 주석이 아닌 자바스크립트용 조건부 컴파일내용입니다.

      jQuery를 조건부 주석을 이용하여 링크를 다르게 하는 것은 구형브라우저(IE8 이하)에만 적용되는 것이라 문제가 발생하지 않습니다. 일반적인 브라우저는 조건부 주석을 무시하고 jQuery 2 버전은 IE9 이상을 위한 라이브러리이기 때문입니다.

      티스토리의 관련코드도 IE9 미만에서만 jQuery 1 버전을 사용하도록 되어 있을겁니다.

  3. 하이 2016.11.01 10:06 신고

    감사합니다 잘보고가요~

  4. 하이 2016.11.01 10:06 신고

    감사합니다 잘보고가요~

  5. ㅅㅅ 2016.11.11 11:09 신고

    감사해요!!!!!!!!!!!!!!!!!

티스토리 툴바