NARADESIGN

웹표준, 웹접근성, 유니버설디자인, HTML, CSS, UI, UX, UD


Quirks Mode 렌더링과 DTD.

본문 건너 뛰기

웹 브라우저가 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,7 FF2 OP9 SF2
None DTD가 없는 경우 Q Q Q Q
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Q Q Q Q
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> A A A A
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> A S S S
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> A S S S
XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> A A A A
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> A S S S

여기서 한 가지 주의할 점은 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→ IE6 IE7 FF2 OP9 SF2
Mode→ Quirks Strict Quirks Strict Quirks Strict Quirks Strict Quirks Strict
width & padding, border
width값에 padding, border값이 포함되지 않는것이 표준
N S N S S S S S S S
margin:0 auto
width값이 적용된 block-lebel 요소는 가운데로 정렬되는 것이 표준
N S N S S S S S S S
.test:hover
가상선택자는 모든 선택자(type selector, id selector, class selector)와 조합될 수 있음
N N N S N S S S S S

 

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

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, 그래도 사용하시겠습니까?

분류: CSS,웹 디자인,웹 표준 | 2007년 3월 27일, 19:48 | 정찬명 | 댓글: 30개 |
트랙백URI - http://naradesign.net/wp/2007/03/27/118/trackback/

30개의 댓글이 있습니다.

  1. 이윤한말하길

    깨름찍한 부분들이었는데 멋지게 정리해 주셨네요. ^ ^

  2. deute말하길

    찬명님의 글에 감탄을!!
    Quirks Mode를 사용하면서 크로스 브라우징을 지키려면 css핵이 제일 유용하겠죠…
    예전에 그렇게 하다 한사이트 만들고 포기해버렸습니다.

  3. 정찬명말하길

    이윤환님, 감사합니다 ^^a 저는 공부한걸 이렇게 정리해서 올려야지 꼭 제것이 된 기분이 들어서 말이죠.ㅎㅎㅎ.(사실은 저희 웹표준팀 스터디 주제라서 예습한겁니다.ㅡㅡ;)

    deute님, 뭐 이런것 가지구 감탄하고 그러세요. 민망하게ㅎㅎ. 저희팀 선수들은 Quirks Mode에서 Cross Browsing 하는데 완전 베테랑 이시더라구요. 입사해서 그 사실을 알고 엄청 놀랐습니다.ㅡㅡ; 하지만 이제는 신규로 제작되는 페이지들에 Quirks Mode를 사용하지 않기로 결정되었답니다. ^^v (저는 hack을 거의 안쓰다가 여기와서 쓰기 시작했어요. Quirks Mode 때문이죠.)

  4. viSharp말하길

    보기편하게 정리가 잘되어있네요! 도움이 되겠습니다~~
    그나저나 표준을 쓰는데 “핵”을 꼭 써야한다니, 통탄을 금할길이 없습니다. 벌금을 물릴 수도 없고ㅎㅎㅎㅎ
    그래도 요즘은 정찬명님 같은 분들이 많아지셔서 한국웹상황이 좀 나아진 것 같아요. 저는 오페라 주로쓰고 있는데 요즘 왠만한데는 다 그럴 듯 하게 보입니다~훗. 비IE(혹은 저버젼IE)는 3군데만 조심하면 됩니다. 1.금융권 2.mall씨리즈(감기몰 설탕몰 등등) 3.전자정부-_-;;

  5. 정찬명말하길

    viSharp님, 오셨군요^^; 저도 오페라 열혈 팬인데 개발편의상 파이어폭스를 주로 쓰는 편입니다. 오페라, 진정 최고의 브라우저라고 생각해요^^b 조심할 곳 3군데는 명심하겠습니다. 금융권이나 전자정부는 당분간 제가 손 볼일이 없을것 같고 ○○몰 씨리즈는 특히 주의해야겠네요^^

  6. 기다림hiphapis말하길

    “건강을 해치는 Quirks Mode, 그래도 사용하시겠습니까?”
    헛, 그럼 찬명님은 건강하시겠군요..!! ㅎㅎ

  7. 정찬명말하길

    아뇨, 저는 Quirks Mode와 Strict Mode를 수시로 전환하고 있습니다. 사용하는 DTD의 종류가 3가지나 되는데 3가지 DTD 모두 렌더링을 다르게 처리해서 지금 무척 헷갈려 하고 있습니다. 괴롭습니다. ㅜㅜ;

  8. 윤좌진말하길

    찬명님의 글을 보면 정말 감탄이 절로 나옵니다. ㅎㅎ;;
    깔끔한요약 방대한 참고자료..@_@

    그런데 마지막에 캠패인이..
    “건강을 해치는 Quirks Mode, 그래도 사용하시겠습니까?”
    이건.. 담배갑에 있던 캠패인을 패러디한건데 이렇게 하면 잘 안지킬것 같아요..
    실제로 담배피는사람들
    “건강을 해치는 담배 그래도 피우시겠습니까?” 라고 적혀있지만 그걸 보면서도 피잖아요 ㅎ;;

  9. 정찬명말하길

    아~ 뭐 대단하다고 감탄하고 그러세요. 전혀 그런걸 기대하지 않았는데 뻘쭘해 지잖아요 ㅡㅡ; (고마워요ㅎㅎ)

  10. 가우리말하길

    너무 잘 설명해주셔서 감사합니다;
    저는 알지만 제 주변인들을 설득하다가 GG 쳤는데, 이 문서 한방으로 끝나네요;

  11. 정찬명말하길

    가우리님 감사해요 ㅜㅜ; 이어지는 감사인사에 감동의 눈물이 파도를 흑흑… 다음 포스팅 해야 하는데 몇일 뒤에 강의 나간다고 지금은 교재(웹 문서 형식의 프리젠테이션)를 만들고 있습니다. 강의 끝나면 열혈 포스팅 모드로 다시 돌아오겠습니다. 행복한 하루 되세요. (여기서 행복한 하루란? – 자기가 쓰던 웹 브라우저 하나만 보면서 코딩 했는데 정말 운이 좋게 다른 브라우저에서 저절로 크로스 브라우징이 되었다거나.. 레이어의 위치값을 대충 적어넣고 렌더링 시켜봤는데 원하는 위치에 딱 들러붙어서 두번 손 안갈 때.. 그런날.. 제일 행복하죠.. ㅋㅋ)

  12. 가우리말하길

    IE6때문에 행복하지 못하네요 ㅠㅠ

    IE6에서는 블로그 검색창이 사라집니다 ㅠㅠ
    레이어의 위치 값을 대충 적어 넣었는데 ㅠㅠ

    IE7처럼 렌더링 하게 해주는 스크립트를 써서 :before같은건 잘되는데 정작 레이어가 안되네요

  13. 정찬명말하길

    아 깊은 슬픔이어라~ ㅡㅜ; 뭐라 위로의 말씀을 드려야 할지…

  14. 이선주말하길

    그레이트! 진짜 좋은 내용이네요.
    이거 깔끔하게 출력하려면 어찌해야 하는지….ㅎㅎ

  15. 정찬명말하길

    필요한 부분만 드래그 하신다음 인쇄범위를 “선택영역” 으로 선택해서 출력하시면 됩니다 ^^;

  16. 백탄왕말하길

    안녕하세요?
    너무 좋은 글이라서 제가 따로 스크랩해서 프린트 해서 보려는데, 오타가 발견되어서 말씀드립니다.
    조금 된 글이지만, 확인해보시기 바랍니다.
    “Rendering Mode에 따른 주요 이슈별 표준 지원 현황”테이블에 두번째 row에.. margin:0 auto;인듯 한데, mragin:0 auto;라고 되어 있네요.. ^^

    좋은글 정말 감사합니다..

  17. 정찬명말하길

    백탄왕님, 정말 감사합니다. 수정해 두었습니다 ^^ 좋은 하루 되세요!

  18. 초식동물말하길

    아.. 어려워요..; 일단 저희 회사 사이트는 Quirks Mode..라나..
    개발자분이 DTD 빼달라고 하셔서 빼고 코딩하고는 있지만.. Cross Browsing할 때..ㅡㅡ;;; 속 좀 터지더라고요.
    물론 터진 거 요리조리해서 막을 땐 또 그 나름의 성취감=.=이 소록소록 쌓여가긴 하지만….. 한두번 할 게 아니고 이제 앞으로 많은 페이지들을 바꿔나갈텐데;;
    제 생각엔 페이지 일부를 수정하는 게 아니고 아예 페이지를 새로 코딩하는 거니 Strict Mode로 바꿔도 되지 않을까 싶은데, 개발할 때 바꾸는 게 힘든가요? 잘 몰라서;;

  19. 정찬명말하길

    @초식동물
    페이지를 새로 코딩하는 경우라면 표준 DTD를 사용해도 서버측 개발시 발생하는 어려움은 없을 껍니다. 만약 서버측에서 새로운 페이지의 DTD를 넣지 못하도록 한다면 그것은 아마도 기존의 낡은 코드를 어떻게든 유지해 보겠다는 건데 그럴때는 DTD 없는 페이지를 개발하는 클라이언트측 개발자의 어려움이 어느정도라는것을 설명해줄 필요가 있겠습니다. DTD는 strict 보다 transitional 모드를 권장합니다. strict는 너무 엄격합니다.

  20. 황준상말하길

    Quirks Mode 라면.. 그냥 드림위버로 작업하시면 안되나요? ㅋㅋ 쓸데없는 소리였습니다.

  21. 황준상말하길

    아..또 좋은글 잘 보고갑니다. 웹표준팀도 있군요.. 부럽ㅜ.ㅜ
    전 혼자서 표준표준 하고있는데.. 듣는 사람도 없고..
    항상 많이 배워갑니다..

  22. dauby말하길

    어디서는 호환모드를 Transitional Mode라고 쓰던데 Quirks Mode와 전자는 서로 어떤 관계를 가지고 있나요?

  23. 정찬명말하길

    호환모드와 쿽스모드는 완전히 다른 모드 입니다.

    호환모드는 HTML 에서 loose.dtd 또는 XHTML에서 transitional.dtd 를 사용한 경우를 말합니다. Almost Standards Mode (표준에 준하는 모드)라고도 하며 이 렌더링 모드를 유발하는 DTD로써 낡은 코드나 문서와의 호환성이 좋고 가장 사용을 권장하는 DTD 입니다. 거의 표준에 준하는 모드 입니다.

    그러나 쿽스모드는 DTD를 사용하지 않았거나 잘못된 DTD를 사용한 경우에 발생하는 모드 입니다.

    하늘과 땅 차이라고 설명드릴 수 있습니다.

    이 밖에 strict.dtd 를 사용하는 Standards Mode (표준 준수 모드)도 있지만 낡은 코드나 문서와의 호환성이 좋지 않기 때문에 사용을 적극 권장하지는 않습니다. 이 DTD를 사용하는 것이 웹 표준을 지키는 것으로 오해하여 어설프게 사용하는 경우도 있으나 오히려 ‘호환모드’를 유발하는 DTD(loose.dtd, transitional.dtd)를 사용할 것을 권장 합니다.

  24. dauby말하길

    그렇군요. 알기쉬운 설명 감사합니다. :8-)

  25. 마약말하길

    찬명님 정말 큰일 하고 계신거예요…ㅎㅎ
    덕분에 왕초보인 제가 하나씩 배우고 있잖아요^^

    이제 각 dtd별로 브라우저들이 어떻게 렌더링 하는지를 살펴봐야 할 숙제가 주어졌네요.^^

    사실 표준 모드로 렌더링 하는 dtd 들은 별 차이가 없는 것 같더라구요. 제 생각엔..ㅋ
    (strict 제외…유효성 검사시 엘리먼트나 속성들을 잡아내므로…)
    한번은 독타입을 이것저것 마구잡이로 바꿔봤는데, 화면이 깨지진 않았습니다.

    쿽스모드 dtd를 사용했더니, 레프트 메뉴의 넓이에 여백넓이가 포함되더군요 ^^

    근데 화면을 깨지 않기 위해 만든 쿽스모드인데, 이게 이해가 잘 안되네요…-_-;;;
    오래된 웹 문서를 기존 상태로 렌더링 해주면서, 최신 브라우저에서도 동작하게 만들려는 의도였다는 말씀이신지…;;;?

  26. 정찬명말하길

    마약님,

    오래된 문서는 보통 DTD가 없거나 표준 DTD가 아닌 경우가 많고 IE 5.x 브라우저에 잘 보이도록 제작되었기 때문에 표준 준수율이 높은 최신 브라우저에서는 깨져 보일껍니다. 그렇기 때문에 DTD가 없는 문서를 최신의 표준 브라우저에서 깨지 않고 보여주려면 최신 브라우저들은 DTD 없는 문서를 만났을 때 엄격한 표준모드 대신 옛날 브라우저를 흉내내는 쿽스모드 상태가 되는 것입니다.

    화면을 깨지 않기 위해 만든 쿽스모드라는 뜻이 그런 뜻이었고 잘 이해하신것 같은데요. ^^

  27. 윤군말하길

    ^^ 또왔습니다…
    저도 나름 자료를 정리하면서 개념잡이를 하려는데요…궁금한것이
    DTD타입 설정 하지 않으면 W3C Validator에서
    로 인식한다는데…그렇다면

    quirks mode 와 같다고 생각하면 될까요??

    가끔 이런
    DTD를 사용하는곳을 봐서요.. 그렇다면 이건 표준을 정의하는 DTD타입이 아닌걸로 이해 하면 되는건가요?

  28. 윤군말하길

    앗…죄송합니다..
    글 수정이 없는데..
    저도 나름 자료를 정리하면서 개념잡이를 하려는데요…궁금한것이
    DTD타입 설정 하지 않으면 W3C Validator에서
    [!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"]
    로 인식한다는데…
    그렇다면 [!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"]은
    quirks mode 와 같다고 생각하면 될까요??

    가끔 이런 [!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"]
    DTD를 사용하는곳을 봐서요.. 그렇다면 이건 표준을 정의하는 DTD타입이 아닌걸로 이해 하면 되는건가요?

    죄송합니다 본의아니게 도배질이 되어버렸습니다.

  29. 정찬명말하길

    @윤군
    네, 맞습니다. DTD를 설정하지 않은 것과 같이 Quirks Mode로 렌더링 됩니다. ^^

  30. [...] 문제 9 _ 다음 중 대중적인 브라우저에서 Quirks Mode로 랜더링 되는 DTD를 모두 고르시오. 1. DTD 없음. 2. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”> 3. <!DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; 4. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”&gt; 5. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> 6. <!DOCTYPE html> [1번, 5번. 참고 - http://naradesign.net/wp/2007/03/27/118/] [...]

댓글 쓰기

전송된 글이 나타나지 않는다면 필터링 된 것입니다. dece24앳gmail.com 으로 메일 주세요.
(X)HTML 코드 사용이 가능하지만 소스 코드 출력을 원하시면 <꺽쇠>는 [괄호]로 변환하여 작성해 주세요.

필수 아님

필수 아님