[IE8] 웹 표준 개발자의 IE8 웹사이트 호환성 대응
한달만에 포스팅입니다. 좀 한가해졌다는 뜻이기도 합니다.
또 어떤 바쁜일이 생길지 모르지만 잠깐 동안 한가해진 동안에는 하고싶었던 공부도 하고
중간고사가 얼마 남지 않았기 때문에 너무 바뻐서 책 한번 펴보지 못한 교과서를 한번 펼쳐 봐야겠습니다. F만 나오질 않길 빌면서 말입니다. ^^;;
쓸데 없는 말은 그만하구요 최근 마이크로 소프트사에서 IE8 버전을 출시했는데요.
곧 오픈이 두개가 있는데 새로운 웹브라우저라니 정말 골치아픈 일이네요.
FF3나, 크롬이니 IE8이니 최근 정말 브라우저 전쟁인거 같습니다. 그에 따라서 웹 개발자들도 힘들구요.. 물론 기본에 충실한 개발자는 힘들지 않겠지만 저처럼 어영 부영 기초 빼고 배운 개발자들은 정말이지 너무 힘듭니다. ㅠㅠ
IE8버전이 나오면서 웹표준을 준수율을 극도로 개선을 시켰다는데 기존 IE7버전에서 돌아가던 멀쩡한 브라우저가 IE8에서는 돌아가지 않는 경우도 발생한다고 합니다.
이게 말이 됩니까. 매번 버전이 바뀔때마다 안되니..기본적으로 하위 버전에도 맞쳐야지 않그렇습니까? 제말이 맞다면 하늘에 대고 "맞습니다." 하고 소리 한번 쳐주세요 ㅡ,.ㅡ^
근데 IE8에서 호환성을 위한 배려를 하지 않은게 아니군요. IE5, IE6, IE7버전의 호환성을 위해 몇가지 방법이 있는데 호환성 문제로 골치거리를 앓고 있는 분들은 한번 적용해보시면 좋은 해결책이 될꺼라 생각합니다.
DTD가 없는 웹 사이트 대응 방법
기본적으로 DTD가 없는 페이지는 아무런 대응을 할 필요가 없습니다.
IE8은 DTD가 없는 페이지는 기본적으로 Quirks Mode로 렌더링 하기 때문에 웹사이트가 깨지지 않습니다. Quicks Mode란 DTD를 표준에 따라 인식하지 못했던 예전 IE5브라우저의 렌더링을 그대로 표현하는 모드입니다. 표준을 따르지 않고 기존 하위 버전에 맞게 맞춰 렌더링을 한다는 말이죠.
DTD가 있는 웹사이트 대응 방법
DTD가 있는 웹사이트인 경우 최적화 된 브라우저의 버전에 따라서 대응 방법이 달라집니다.
첫째 : IE5에 최적화 된 페이지 대응법
둘째 : IE6에 최적화 된 페이지 대응법
셋째 : IE7에 최적화 된 페이지 대응법
MS는 낡은 웹 브라우저에 최적화된 페이지를 깨지지 않게 하기 위해서 <meta> 태그를 이용한 호환 유도 기법을 제공합니다.
DTD가 있고 IE5에 최적화 된 페이지 기법
<meta http-equiv="X-UA-Compatible" content="IE=5" />
</head>
<head></head> 사이에 다음과 같은 <meta> 태그를 사용하게 되면 IE5 렌더링을 흉내내는 Quirks Mode로 렌더링을 하게 된다.
DTD가 있고 IE6에 최적화 된 페이지 대응 방법
IE6에 최적화된 페이지는 개편을 해야한다. IE7로 최적를 해야 하는데 IE8에는 IE6 렌더링 엔진이 없기 때문인데 IE6에서 IE7버전과의 차이는 크지 않기 때문에 IE7로 렌더링 한 후에 다음 코드로 대응 한다.
<meta http-equiv="X-UA-Compatible" content="IE=7" />
</head>
DTD가 혼재되어 있는 웹 사이트 대응법
DTD가 혼재 되어 있는 웹 사이트는 DTD가 없는 페이지와 DTD가 있는 페이지를 구분하여 각각 다른 방법으로 적용해야 한다. 하지만 이런 호환 유도 코드를 DTD가 있는 페이지만 별도로 적용하는 것이 어렵다면 DTD가 있는 페이지만 IE7로 최적화 한 후 모든 페이지에 다음과 같은 코드를 작성한다.
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
</head>
DTD가 없는 페이지는 여전히 Quirks Mode로, DTD가 있는 페이지는 IE7로 표준 모드로 렌더링 할것이다. 따라서 DTD가 있는지 없는지 없는지 여부에 관계없이 IE7로 렌더링 하는 'IE=7' 보다 DTD가 있고 없음에 따라 자동으로 렌더링 모드를 전환해 주는 'IE=EmulateIE7' 코드를 더욱 권장한다.
위의 방법은 각 페이지에 IE에 적용하는 각 페이지에 <meta>를 삽을을 해줘야만 했다.
하지만 이 방법은 모든 페이지에 적용을 해야 하므로 페이지 본수가 늘어날수록 정말 많은 일이 아닐수가 없다. 이 방법을 해결하기 위해서 서버측 응답 헤더에 호환 유도 코드를 삽입 할 수도 있는데 그 내용을 알아보겠다.
호환 유도 코드를 서버측 응답 헤더에 적용하는 방법
IIS에 적용 할 코드
<configuration>
<system.webServer>
<httpProtocol>
<customHeaders>
<clear />
<add name="X-UA-Compatible" value="IE=EmulateIE7" />
</customHeaders>
</httpProtocol>
</system.webServer>
</configuration>
Apache에 적용 할 코드
'DEVELOPMENT > Javascript' 카테고리의 다른 글
| HTML 특수문자코드표 (0) | 2009.07.22 |
|---|---|
| [Event] observe 에서의 onload와 dom:loaded 의 차이 (0) | 2009.05.21 |
| [javascript] select box (0) | 2009.02.16 |
| [HTML] 제어 문자 (0) | 2009.01.16 |
| [HTML 팁] HTML 소스 정렬 사이트 (0) | 2008.12.27 |
