IE9 이하 전용으로 CSS 클래스를 예외 처리하는 방법
우리나라는 아직도 인터넷 익스플로러 9에 대한 호환성 처리를 해야 하는 경우가 생기는 불행한 환경입니다.
물론 실무에서는 어쩌다 입니다만, 그것이 실제로 일어납니다.
아래 코드는 실제 금융권 사이트의 IE 호환성 지원을 위한 코드입니다.
<!--[if IE 7 ]> <body class="ie7 le_ie9 le_ie8"> <![endif]--><!--[if IE 8 ]> <body class="ie8 le_ie9 le_ie8"> <![endif]--><!--[if IE 9 ]> <body class="ie9 le_ie9"> <![endif]--><!--[if (gt IE 9)|!(IE)]><!--> <body class="modern"> <!--<![endif]-->
국내 웹사이트 환경, 특히 금융권 사이트인 경우 최소한 뭔가 호환성 문제가 있어 지원이 안된다는 메시지라도 출력해줘야 하는 상황이 생기기 때문에 어쩔 수 없이 예외 처리를 해줘야 합니다.
최소한 IE9 이라도 지원을 해줘야 하는 경우, 제일 간단하고 기본적으로 사용하는 방법은 다음과 같습니다.
<body> 태그에 정의해서 사용해도 됩니다.
<!--[if IE ]><html class="ie"><![endif]--><!--[if !IE]>--><html><!--<![endif]-->
주석을 활용해서 IE 인 경우(IE9)
윗줄을
그 이외에는 아랫줄 html 태그를 생성합니다.
* 주석문 처리하는 구문이 다른 것에 주의해야 합니다.
IE9 이하와 그 이외의 모든 버전 및 브라우저에서 주석 처리를 하는 방법이 다르기 때문입니다.
html 태그에 "ie" 클래스가 정의되어 있기 때문에
CSS에서는 다음과 같은 처리가 가능해집니다.
div{ width:100px; height:100px; background-color:#a00;}
.ie div{ background-color:#0a0;}
div 태그의 크기를 100pxx100px 로 지정하고 배경색을 빨강 계열로 지정하는 기본 CSS 를 예를 든다면
IE9 이하에서는 ".ie div" 클래스가 실행되어 배경색을 초록색으로 덮어쓰게 됩니다.
또는 IE9 이하에서는 특정 요소가 보이거나 보이지 않게 처리함으로써 원하는 특정 메시지를 표시해줄 수도 있습니다.
루트 태그인 <html> 태그에 정의한 "ie" 클래스명을 앞에 붙여서 예외 처리를 해주면 비교적 수월하게 예외처리를 해줄 수 있습니다.
클래스 명은 원하는 대로 정의해서 쓰면 됩니다.
저같은 경우는 짧은걸 선호해서 "ie"로 정의해 쓰지만 "ieonly" 라든가 하는 식으로 가독성이 높은 클래스명을 정의해 사용하면 더 좋습니다.