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 에 설정된 호환성 모드를 따르게 됩니다.

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

[윈도우] Windows에서 폴더의 내용을 텍스트 파일로 저장하는 방...

[javascript] select potion 제어 변수들

[리눅스] gzip 압축풀기

[php] 날짜 계산 예제

[엑셀] 셀에 날짜 입력 단축키

[html5] 스마트폰 웹브라우저 상단바 없애는 방법

[html5] datalist 사용법

[Android] android studio 설치 및 셋팅

[MySql] 날짜 비교 검색 (오늘, 어제, 한달전...)

phpMyAdmin 설치 및 오류 해결

MS 엣지 강력한 새로고침

cURL 사용법

[Javascript] 숫자를 글자로 바꿔주는 자바스크립트

[엑셀] 셀을 클릭하면 설명 메시지를 팝업 시키는 방법

[Javascript] confirm 클릭 확인받기

[HTML][CSS] 페이지 넘김 및 프린터 출력 여백 설정

[javascript] window.open으로 오픈한 자식창에서 부모창 태그 �...

[jQuery] 익스플로러 외 날짜 입력박스 사용하기(input type dat...

[JavaScript] 스크롤할때 메뉴바 상단에 고정하기

CSS3 미디어쿼리 @media 규칙 이해.