재우니의 블로그



참고: 이 문서는 임시 문서이며 변경될 수 있습니다.


Windows Internet Explorer를 개발할 때 기본적으로 고려한 점 중 하나는 기존 웹과의 사이트 호환성과 새로운 기능 사이에서 균형을 잡는 일이었습니다. 그에 따라 Windows Internet Explorer 8에는 기존 환경에서 새로운 표준으로의 매끄러운 전환을 돕기 위한 호환성 모드가 도입되었습니다. Windows Internet Explorer 8 호환성 모드에 대한 자세한 내용은 다음 문서를 참조하십시오.

 

이 문서에서는 Windows Internet Explorer 8에서 올바르게 렌더링되도록 사이트를 수정하는 데 필요한 단계를 안내합니다.



간단한단기적해결방법

 

Windows Internet Explorer 7에서 올바르게 동작하는 기존 웹 페이지를 유지 관리하고 있으며, 최소한의 수정만으로 Windows Internet Explorer 8에서 동작하도록 이 웹 페이지를 업데이트해야 하는 경우를 예로 들어 보겠습니다. 이는 두 가지 방법을 통해 가능합니다. 첫 번째 방법은 Windows Internet Explorer 8이 Windows Internet Explorer 7과 비슷한 방법으로 페이지를 렌더링하도록 하는 호환성 모드 META 태그를 각 페이지에 추가하는 것이며, 두 번째 방법은 웹 서버를 제어할 수 있는 경우에 한해 각 웹 페이지에 META 태그에 해당하는 사용자 지정 HTTP 응답 헤더를 보내도록 서버를 구성하여 서버에서 자동으로 호환성 태그를 추가하는 것입니다.

 

각페이지를수정하는방법
 

각 웹 페이지의 HEAD 요소에 다음 HTML META 태그를 배치합니다(다른 TITLE 또는 META 태그의 앞).

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>



이 태그는 Windows Internet Explorer 8에 Windows Internet Explorer 7과 같은 방법으로 각 페이지를 렌더링하도록 지시합니다.

 

각페이지를자동으로수정하도록서버를구성하는방법
 

각 페이지에 추가하는 방식에서 사용한 것과 동일한 HTML META 호환성 태그를 자동으로 추가하려면 다음 헤더를 보내도록 서버를 구성합니다.

X-UA-Compatible: IE=EmulateIE7

Microsoft 인터넷 정보 서비스(IIS) 7.0을 사용할 경우 Web.config 파일을 다음과 같이 구성합니다.


<?xml version="1.0" encoding="utf-8"?> <configuration>    <system.webServer>       <httpProtocol>          <customHeaders>             <clear />             <add name="X-UA-Compatible" value="IE=EmulateIE7" />          </customHeaders>       </httpProtocol>    </system.webServer> </configuration>



변경 내용을 적용할 디렉터리에 Web.config 파일을 추가합니다.


웹 페이지의 실제 태그에 있는 META 호환성 모드 전환 태그는 항상 HTTP 헤더 선언보다 우선하여 적용됩니다.

사용자 지정 HTTP 응답 헤더를 보내도록 웹 서버(IIS 6.0 포함)를 구성하는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오.
 



이러한 단기적인 해결 방법은 급할 때 임시로만 사용하는 것이 좋습니다. 최종적으로는 Windows Internet Explorer 8 이상에는 표준 기반 코드를 보내고 그 이전 버전의 Windows Internet Explorer에는 레거시 코드를 보내도록 웹 사이트를 수정해야 합니다.

 

권장되는영구해결책
 

Windows Internet Explorer 7에서 올바르게 동작하는 기존 웹 페이지를 유지 관리하고 있으며, Windows Internet Explorer 8에서 올바르게 동작하고 이전 버전의 브라우저일 경우의 처리를 위한 특수 사례를 적용한 표준 기반 페이지를 만들려는 경우를 예로 들어 보겠습니다. 이렇게 하려면 기본 페이지 흐름에 새로운 CSS 2.1 기능을 추가한 후 호환성 모드를 IE8 표준으로 구성하고 조건부 주석을 사용하여 기존 버전의 Windows Internet Explorer를 위한 해결책을 만들어야 합니다.

 

호환성모드를 IE8 Standards(IE8 표준)로설정
 

각 웹 페이지의 HEAD 요소 위에 다음 HTML META 태그를 배치합니다(다른 TITLE 또는 META 태그의 앞).

<meta http-equiv="X-UA-Compatible" content="IE=8"/>


이 태그는 Windows Internet Explorer 8에 CSS 2.1 표준을 사용하여 각 페이지를 렌더링하도록 지시합니다.

또한 위에서 살펴본 방법 대로 사이트 전체를 변경하도록 웹 서버를 구성할 수 있습니다. content 값을 "IE=8"로 변경하기만 하면 됩니다. 페이지 수준의 META 변경은 헤더 값보다 우선하므로 이 방법을 사용할 경우 기존의 페이지 수준 헤더는 모두 변경하거나 제거해야 합니다.

 

조건부주석을사용하여이전버전의브라우저에서도사이트가올바르게동작하도록유지
 

다음 코드 예는 조건부 주석을 사용하여 CSS의 적용 대상을 현재 또는 이전 버전의 Windows Internet Explorer로 지정하는 방법을 보여 줍니다.
 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"> <html>    <head>       <title>Test Page</title>       <meta http-equiv="X-UA-Compatible" content="IE=8"/>       <!--[if gte IE 8]>       <style type="text/css">       body {        color: #0000ff;        background-color: #000000;       }       </style>       <![endif]-->       <!--[if lt IE 8]>       <style type="text/css">       body {        color: #000000;        background-color: #ffffff;       }       </style>       <![endif]-->    </head>    <body>       <h1>       <!--[if gte IE 8]>       Chapter 1.       <![endif]-->       First Chapter       </h1>       <h1>       <!--[if gte IE 8]>       Chapter 2.       <![endif]-->       Second Chapter       </h1>       Text any version will see.    </body> </html>


브라우저의 버전을 알아내는 방법에 대한 자세한 내용은 다음 문서를 참조하십시오.



여기서 설명한 영구 해결책은 웹 사이트 수정을 위한 가장 좋은 방법입니다. 이러한 표준을 준수하면 사이트는 기존 버전의 Windows Internet Explorer와 Windows Internet Explorer 8은 물론 앞으로 출시되는 버전에서도 모두 잘 동작하게 됩니다.

'프로그래밍 > HTML' 카테고리의 다른 글

SASS 개발 툴 및 설치  (0) 2012.04.29
CSS3 Target Trick  (0) 2012.02.10
window.open 새창 차단 여부 확인  (0) 2012.02.01
Open API site  (0) 2010.12.03
CSS 공부하기  (0) 2010.05.07