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

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

[엑셀] 특정 자릿수 숫자 반올림

[Android] Chrome Custom Tabs 시작하기

[Android] 상태바 없애기

[Android] 타이틀바 없애기

[Android] ERR_CLEARTEXT_NOT_PERMITTED 웹뷰 호출 에러

Chrome 크롬 강력 새로고침 단축키

홈페이지(웹브라우저) 창 가로 세로 확인 방법

Html CSS 수직으로 중앙 정렬 하는 방법

textarea 엔터키 입력할때마다 입력박스 높이를 증가시키는 자바...

javascript encodeURI -> php EUC-KR decode

윈도우 창 단축키

컴퓨터 종료시간 예약하기

말풍선 위치 계산 (마우스 포인터 위치계산)

[Javascript] 날짜 유효성 검사

MySql 기존 컬럼에 자동증가 속성 변경, 추가 및 초기화

CSS 반응형 레이아웃 만들기

CSS로 글자 자르기 및 말줄임 표시 하기

홈페이지 팝업창 화면 가운데 출력하기

URL 최대길이

공공저작물 자유이용 사이트