익스플로러 조건부 주석 효율적으로 사용하는 방법
- 퍼블리셔/기술
- 2013. 1. 5. 17:25
IE는 버젼별로 조건을 걸어서 스타일을 작성하곤 합니다.
그래서 HTML이 아주 조건부 주석으로 난잡해지고 또한 스타일시트도 버젼별로 만들어서 사용하곤 했습니다.
하지만 좀더 간단하고 효율적인 방법이 있어 소개합니다.
아래의 경우는 제가 이번에 제작한 스킨인 Responsive 라는 스킨에도 포함된 마크업구조 입니다.
반응형 티스토리 블로그 스킨 Responsive 를 소개합니다. -> http://demun.tistory.com/2264
티스토리의 경우 스킨 편집에서 업로드하면 images 라는 폴더구조가 생깁니다.
ie6,7,8 등의 스타일시트를 만들고, IE를 조건부로 스타일시트를 링크시킬려면 <head>와 </head>에 아래처럼 사용합니다.
<head>
............
<link rel="stylesheet" href="./style.css" type="text/css" />
<!--[if lt IE 7 ]><link rel="stylesheet" href="./images/ie6.css" type="text/css" /><![endif]-->
<!--[if lt IE 8 ]><link rel="stylesheet" href="./images/ie7.css" type="text/css" /><![endif]-->
<!--[if gte IE 8 ]><link rel="stylesheet" href="./images/ie8.css" type="text/css" /><![endif]-->
</head>
이것도 좋지만 단점은 각각의 스타일시트를 만들어서 사용해야 한다는 점입니다.
이걸 html 에 주석으로 사용하는 방법을 사용하는것이 좋습니다.
아래처럼 사용합니다.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ko-KR" class="no-js"> <!--<![endif]-->
<head>
......
</head>
그럼 IE버젼별로 스타일시트를 만들지 않고도 클래스를 사용해서 사용하면 됩니다.
style.css 에 각각의 버젼별로 클래스 ie6, ie7, ie8 ... 등으로 사용이 가능하지요.
아래 예를들어 사용한 예입니다.
/* 기존의 스타일 */
body { background: #333; }
/* IE 6 스타일 */
.ie6 body { background: #444; }
/* IE 7 스타일 */
.ie7 body { background: #555; }
/* IE 8 스타일 */
.ie8 body { background: #666; }
물론 ie9, ie10도 따로 만들수도 있습니다.
위는 예제입니다.
이런 예제는 html에 조건부 주석을 넣음으로써 하나의 스타일시트에 조건부 스타일을 넣음으로써 분기해서 사용하는것보다 좀더 가볍고 빠르다는 장점이 있고, 코드의 간결성에도 좋습니다.
또 예를들어 실무에서는 이런 경우가 많습니다.
제가 제작한 Responsive 반응형 스킨도 이런 형식을 사용했는데요. CSS3의 경우 IE9이하는 지원을 하지 않습니다.
그중에서도 IE9는 border-radius 등을 지원하니 border-radius 를 사용하는데 IE9를 포함할 필요가 없지요.
즉 IE8이하의 모든 버젼을 포함한 IE6, IE7, IE8만을 위한 스타일을 주고 싶은경우 아래처럼 old-ie 라는 클래스를 첨가해서 작성하면 더 좋겠죠. 물론 클래스는 맘대로 입니다.
버젼별로도 스타일을 주고, 특정버젼이하 모든것을 포함 버젼도 따로 스타일을 주고 하는 경우입니다.
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js old-ie ie6"> <![endif]-->
<!--[if IE 7]> <html class="no-js old-ie ie7"> <![endif]-->
<!--[if IE 8]> <html class="no-js old-ie ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="ko-KR" class="no-js"> <!--<![endif]-->
<head>
......
</head>
이런경우 IE8이하 모두 해당되는 스타일을 주려면 익스플로러 공통 클래스인 old-ie 를 사용하면 되겠죠.
/* IE 8이하 익스플로러 스타일 */
.old-ie body { background: #666; }
익스플로러로 접속해봤습니다.
이미지를 보시면 아시겠지만 old-ie 클래스가 보이고, ie8로 접속해서 ie8클래스가 보입니다.
얼마든지 사용자가 알아서 작성할수 있다는것이 장점입니다.
이번에는 IE7로 접속해봤습니다.
보시는것과 같이 공통된 old-ie 클래스와 ie7로 접속해서 ie7 클래스가 보입니다.
이처럼 사용하는것이 좀 더 효율적이고 사용자에 맞게 얼마든지 수정이 가능하게 사용할 수 있습니다.
여기서 한가지 짚고 넘어가기.
주석에 보면 <!--[if lt IE 7]> , <!--[if IE 7]> , <!--[if IE 8]> , <!--[if gt IE 8]> 이런 형식의 주석이 나오는데요. 이것이 뭔지 대략 알고 넘어갑니다.
gt = greater than -> 보다 큰 :: 예제 :: if gt IE 6 -> 6보다 큰 즉 7,8 버젼 이상을 말합니다. 6버젼 포함 안됨.
gte = greater than or equal to -> 같거나 큰 :: 예제 :: if gte IE 6 -> 6과 같거나 큰. 즉 6을 포함한 7,8 이상의 버젼을 말합니다.
lt = less than -> 보다 작은 :: 예제 :: if lt IE 6 -> 6보다 작은. 즉 6을 포함하지 않은 작은버젼인 5이하를 말하는겁니다.
lte = less than or equal to -> 같거나 작은 :: 예제 :: if lte IE 6 -> 6과 같거나 작은 버젼. 즉 6을 포함하여 5이하를 말하는 겁니다.
이뜻을 알아야 적절하게 사용할 수 있을 겁니다.