Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

Quirks Mode 렌더링과 DTD. 본문

Web publishing/웹 표준

Quirks Mode 렌더링과 DTD.

BeOne 2013. 4. 4. 14:15

웹 브라우저가 Quirks Mode와 Strict Mode를 갖게 된 이유.

대부분의 웹 브라우저는 두 가지 렌더링 모드를 지니고 있으며 그것은 바로 Quirks Mode와 Strict Mode 입니다. 이렇게 두 가지 렌더링 모드를 지니게 된 것에는 나름의 이유가 있습니다. 웹 브라우저의 렌더링은 점점 표준에 가깝게 개선되었지만 그렇지 못한 오래된 웹페이지들은 최신 버전의 브라우저에서 깨져 보이게 되는데 이를 위하여 각 브라우저 벤더들이 fallback을 제공하고 있는것입니다. 이것은 마치 제 얼굴이 너무 못생겨서 최신의 미남형으로 성형수술을 했더니 사람들이 저를 몰라보는 바람에 다시 옛날 모습의 가면을 뒤집어 쓰는것과 비슷한 상황입니다. IE5 가 최초로 이것을 시도했고 다른 브라우저 벤더들도 이런 케이스를 따르기 시작했습니다. Quirks Mode는 오래된 웹페이지를 깨지 않으려는 의도가 담겨져 있습니다. 하지만 UI개발자들은 이것 때문에 골치가 아프죠. Quirks Mode상태로 Cross Browsing유지하는 사이트들을 보면 절로 감탄이 나옵니다.

웹 브라우저는 문서의 DTD에 따라서 Quirks Mode와 Strict Mode로 전환 됩니다.

여러 종류의 DTD가 있지만 현재 가장 많이 사용되고 있는 DTD와 해당 DTD별로 웹 브라우저가 어떤 렌더링 모드를 갖게 되는지 정리해 봅니다. 표를 보면 아시겠지만 DTD는 아래쪽에 있는 것일 수록 권장되며 제가 권장하는 DTD는 과거 문서와의 호환성을 지닌 최신버전의 XHTML 1.0 Transitional 모드 입니다.

표 보는법

Q : Quirks Mode (하위버전 렌더링 호환성 유지 모드)
A : Almost Standards Mode (표준에 준하는 모드)
S : Standards Mode (표준 준수 모드)
DTD Switching에 따른 웹 브라우저별 렌더링 모드 전환 표(참조문서)
DTD의 종류IE6,7FF2OP9SF2
NoneDTD가 없는 경우QQQQ
HTML 4.01<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">QQQQ
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">AAAA
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">ASSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">ASSS
XHTML 1.0<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">AAAA
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">ASSS

여기서 한 가지 주의할 점은 Quirks Mode라고 해서 모든 브라우저가 동일하게 렌더링 하는것은 아니라는 점 입니다. 브라우저마다 Quirks Mode 상태일때 호환시키려고 하는 요소들이 각각 다릅니다. 예를들면 Quirks Mode 상태일때 IE는 Box Model을 잘못 해석하지만 나머지 브라우저들은 Quirks Mode 상태라고 할지라도 Box Model에 대하여 표준을 준수하기 때문입니다.

Rendering Mode(Quirks & Strict)에 따른 주요 이슈별 표준 지원 현황.

렌더링 모드(DTD)를 전환했을 때 화면에 차이가 발생한다는 것은 해당 브라우저가 어떤 속성을 Quirks Mode 상태로 렌더링 했다는 뜻입니다. 그리고 렌더링 모드(DTD)가 전환될 때 렌더링의 차이가 없는 경우도 있습니다. 이런 경우는 해당 브라우저가 Quirks Mode 상태라고 할지라도 해당 속성에 대하여 W3C표준을 지원한다는 뜻입니다.

Rendering Mode에 따른 주요 이슈별 표준 지원 현황(참조문서) S:W3C Standard, N:None Standard
Browser→IE6IE7FF2OP9SF2
Mode→QuirksStrictQuirksStrictQuirksStrictQuirksStrictQuirksStrict
width & padding, border
width값에 padding, border값이 포함되지 않는것이 표준
NSNSSSSSSS
margin:0 auto
width값이 적용된 block-lebel 요소는 가운데로 정렬되는 것이 표준
NSNSSSSSSS
.test:hover
가상선택자는 모든 선택자(type selector, id selector, class selector)와 조합될 수 있음
NNNSNSSSSS

 

위 세 가지 이슈들은 비교적 사용빈도가 높다고 판단되어 열거하였습니다. 하지만 이 세 가지 이슈 외에도 더 많은 항목을 보려면 제가 참조했던 문서를 확인하세요.

Cross Browsing을 유지하려면 Quirks Mode를 유발하는 DTD를 피할 것.

Quirks Mode를 유발하기 때문에 피해야 할 DTD 형식은 아래와 같습니다.

  • DTD를 적지 않는 경우.
  • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Almost Standard 또는 Standard 모드로 렌더링 되는 DTD는 아래와 같습니다.

  • HTML 4.01 문서라면
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0 문서라면
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

건강을 해치는 Quirks Mode, 그래도 사용하시겠습니까?

저작자표시

'Web publishing > 웹 표준' 카테고리의 다른 글

IE7 문제점 해결: z-index, 리스트 계단현상, Hack, hasLayout  (0) 2013.05.03
브라우저 모드 설정 관련  (0) 2013.04.04
ie9 핵 사용법 (+추가 : ie10 핵)  (0) 2013.03.18
IE 핵 (css hack)과 IE filter  (0) 2013.03.13
[IE6,IE7] vertical-align (IE6과 7버전 css핵을 사용한 DIV 내부 내용 세로 가운데 정렬)  (0) 2013.03.13
'Web publishing/웹 표준' Related Articles more