IE 문서모드

과거 IE가 브라우저 시장을 지배한 탓에 HTTP 표준이 있음에도 불구하고 IE는 이상하게도 표준을 자꾸만 벗어나 있었습니다. 하지만, 이제는 IE도 표준을 무시할 수 없는 탓에 IE도 정신을 차리고 표준을 준수하려고 많이 노력하는 것이 보입니다.

이런 과정에서 발생하는 찌끄레기 중 개발자를 귀찮게 하는 것이 있으니 IE8 부터 등장하는 호환성 모드입니다. IE8 부터 표준에 대한 지원을 강화함에 따라 이전 전용 코드들에 대해서 문제가 발생하는데 이를 해결하기 위한 일종의 땜빵(?)이 호환성 모드입니다. 개발자를 귀찮게 하는 호환성 모드에 대해서 살펴보고자 합니다.

IE8 이후의 버전에서는 F12로 개발자 모드 창을 띄울 수 있습니다. 개발자 모드 창에서 보면 “브라우저 모드”와 “문서 모드” 2가지가 있는 것을 볼 수가 있습니다. “브라우저 모드”는 현재 브라우저의 기본 셋팅을 정의하는 것이고, “문서 모드”는 콘텐츠를 랜더링하는 방식을 정의하는 것입니다.

즉, “문서 모드”에 IE7 로 지정이 되어 있다면, 나의 브라우저가 IE8,9,10 이라 할지라도 콘텐츠를 랜더링하는데 사용되는 방식이 IE7을 따르겠다라는 의미가 됩니다.

이러한 값들에 대한 설정은 호환성 보기 메뉴를 통해서 지정할 수도 있으며, 윈도우 레지스트리

[HKEY_CURRENT_USERSoftwareMicrosoftInternet ExplorerMainFeatureControlFEATURE_NATIVE_DOCUMENT_MODE]

에서도 그 값을 설정할 수 있습니다. 하지만, 이러한 설정을 일반 사용자가 이해하고 설정할리 만무하니 콘텐츠를 제작하는 사람은 자신의 콘텐츠가 사용자 브라우저에서 어떻게 랜더링될 지 결정할 수 있어야 합니다. 이와 같은 이유로 <head> 내에 <meta> 태그를 통해서 콘텐츠를 랜더링 할 “문서 모드”를 지정할 수 있는 코드가 생기게 됩니다.

“문서 모드”는 <head> 태그 내에 아래와 같이 설정하면 위에서 얘기한 사용자의 설정보다 우선하여 적용되게 됩니다.

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

설정의 세부값은 아래와 같습니다.

1. Quirks Mode 설정
<meta http-equiv="X-UA-Compatible" content="IE=5" />
2. Internet Explorer 7 Standards 모드
<meta http-equiv="X-UA-Compatible" content="IE=7" />
3. Internet Explorer 8 Standards 모드
<meta http-equiv="X-UA-Compatible" content="IE=8" />
4. 가장 최신 Internet Explorer 버전의 Standards 모드
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />

추가로 사용자의 PC에 Chrome Browser 가 설치되어 있다면 아래와 같이 설정하여 Chrome Frame 을 이용하여 랜더링 하도록 지정할 수도 있습니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1" />

위와 같이 <head> 태그 내에 랜더링 모드를 설정하였음에도 불구하고 원하는대로 “문서 모드”가 변경되지 않는 경우가 발생할 수 있습니다. 아래와 같은 두 경우에 해당한다면 위에서 설정한 랜더링 모드 설정은 무용지물이 되게 됩니다.
1.!DOCTYPE 을 지정하지 않은 경우
2.Web Server 에서 Custom Header 를 보내는 경우

즉, 문서에는 반드시 !DOCTYPE 이 지정되어야 하며 !DOCTYPE 이 지정되지 않을 경우 자동으로 쿼크모드(Quirks Mode) 로 동작하게 됩니다. 또한, 웹 서버에서 Response Header 를 보낼 때 Custom Header 를 보내게 되면 <head> 내에 포함된 랜더링 모드는 무시되게 되며, 사용자 PC 에 설정된 호환성 모드를 따르게 됩니다.

컴퓨터와 관련있는 모든 팁을 공유합시다.

저작권 문제없는 무료 이미지 사이트

[JavaScript] 연관배열

[JavaScript] typeof 문 사용방법

[JavaScript] try catch문 사용방법

Internet Exploer 11 시작페이지로 등록 문제

[엑셀] 숫자 천단위 기호 표시하는 함수

IE 문서모드

javascript 에서 window.onload() 와 window::onload() 비교

3DP Chip은 드라이버를 쉽게 찾아주고 3DP Net은는 랜카드통합 �...

android:theme="@android:style/Theme.Dialog" 에러가 날때

javascript로 HTML5 에서 재공하는 Placeholder 기능을 구현한다...

Internet Explorer에서 웹 페이지를 인쇄하거나 인쇄 미리 보기�...

[엑셀] 숫자를 문자로 변환

정상 아이디로 로그인 했는데 deleted 로 로그인 되는경우!!!

[엑셀] 많은 메모를 한꺼번에 모두 삭제하기

[엑셀] 특정기간 년, 월, 일 계산함수 (근속개월수)

메인보드, 하드디스크, 그래픽카드, 파워써플라이의 고장증상

갤럭시S 트위터 알림 설정방법

HTML과 XHTML의 차이점

Apache rewrite Module