CSS - IE 조건 주석문

※ 본 포스팅은 책『실전 프로젝트 반응형 웹 퍼블리싱』을 바탕으로 작성됨.

IE 조건 주석문

조건 주석문이란 일반적인 주석문을 말하는 게 아니라 IE 브라우저에서만 다른 CSS 파일을 적용하고자 할 때 쓰는 일종의 문법적인 구문이다.
IE6, 7, 8 브라우저는 다른 표준 브라우저들에 비해 CSS 실행 결과가 다르게 나타나는 경우가 빈번히 있어, 그런 경우 CSS를 다르게 적용해 주어 비슷하게라도 보여지도록 해주어야 하기 때문이다. 사용법은 다음과 같다.

<link rel="stylesheet" type="text/css" href="css/main.css" />
<!--[if lt IE9]>
  <link rel="stylesheet" type="text/css" href="css/main_ie.css" />
<![endif]-->

위의 구문에서 main.css 파일을 주 CSS 파일로 사용하지만 브라우저가 인터넷 익스플로어 9버전보다 낮을 경우 즉, IE6, IE7, IE8에서는 main_ie.css 파일을 사용하게 된다.

<link rel="stylesheet" type="text/css" href="css/main.css" />
<!--[if IE6]>
  <link rel="stylesheet" type="text/css" href="css/main_ie6.css" />
<![endif]-->

위의 구문은 main.css 파일을 CSS 파일로 사용하지만 브라우저가 인터넷 익스플로어 6일 경우에서만 main_ie6.css 파일을 사용하게 된다는 뜻이다.

그렇다면 이래야 할 일이 뭐가 있을까? 한 예로 입력 양식 중 체크 박스의 여백이 IE6,7에서 다르게 나타나며, 다른 예로는 이미지 중 svg포맷이 IE에서 나타나지 않는다. 크롭 브라우저에서는 화면이 확대되어도 svg 포맷의 이미지는 꺠끗하게 나타나지만, IE에서는 svg는 보이지도 않는다. 따라서 IE에서는 이미지를 gif나 jpg로 바꿔 주어야 한다.