DTD 의 이해

Web 2008. 7. 1. 17:57
DTD의 이해 HTML/CSS

2008/05/09 14:24

복사 http://blog.naver.com/niceilm/150031138845

이 포스트를 보낸곳 ()

Overview
  • DTD의 정의
  • DTD 이해의 필요성
  • DTD의 이해
  • DTD에 따른 렌더링 차이

DTD의 정의

  • DTD란?
    • Document  Type Definition  (문서형 정의)
    • 문서의 정보 모델을 구체적으로 서술한 것으로서, 문서를 구성하는 정보 요소, 정보 요소의 구조와 특성 등 문서의 형태를 구조화 한 것
    • 웹브라우저에서 HTML 문서가 렌더링 되는 기준이 됨
  • DTD의 구성

DTD 이해의 필요성

  • 브라우저 및 DTD에 영향받지 않는 동일한 UI의 스크립트 개발
    • 현재 라이브러리의 문제점 파악 및 개선
    • 추후 발생할 문제점에 대해서 인지 가능
  • WS팀의 주요 사용 DTD가 변해가는 상황임
    • WS팀과의 협업 시, 문제점 파악 용이

DTD의 이해 - XHTML의 특징

  • 문법적으로 엄격하게 구성되어 있어야 한다.
  • 요소와 속성은 소문자로 표기되어야 한다.
  • 모든 태그는 종료태그를 갖는다.
  • 속성 ‘값’들은 항상 따옴표로 감싸주어야 한다.
  • 속성과 값의 단축표기를 허용하지 않는다.
  • 비어있는 태그(종료태그가 없는 태그)도 종료 되어야 한다.
  • a, applet, frame, iframe, img, map 에서 name 속성은 XHTML에서는 지원하지 않는다.

DTD의 이해 – 여러 종류의 DTD

DTD의 이해 - Quirks Mode

  • Quirks Mode는?
    • 점점 표준에 가깝게 개선된 웹브라우저들이 그렇지 못한 오래된 웹페이지들을 정상적으로 보여주기 위해 최신 버전의 브라우저에서 제공하는 호환모드
  • Quirks Mode로 동작하는 경우
    • DTD를 선언하지 않거나 잘못 선언한 경우
    • HTML 4.01 문서에서 시스템 식별자를 지정하지 않는 경우
    • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  • Quirks Mode의 문제점
    • Quirks Mode는 비표준 모드로서 브라우저에 따라 호환시키려고 하는 요소들이 다르기에 브라우저에 따라 다르게 보여질 수 있는 문제가 있음 예) IE와 다른 브라우저 간의 Box Model 해석 차이 등등
DTD의 이해 – DTD 선언에 따른 브라우저별 렌더링
Q: Quirks Mode, A: Almost Standards Mode, S: Standards Mode

DTD의 이해 - DTD에 따른 렌더링 차이

  • Box Model
    • IE에서 Quirks Mode인경우 넓이를 지정하거나  계산 시, border와 padding을 포함하여 처리하는 반면 표준 모드에서는 실제 객체의 넓이를 기준으로 처리함
  • white-space : pre
    • 해당 요소 안의 공백 문자가 무시되지 않고 pre 요소처럼 처리할 수 있는 white-space : pre 속성이 Quirks Mode일 때는 윈도우 계열의 IE에서 제대로 처리되지 못함
      • IE Quirks Mode
      • Strict Mode
  • width and margin : auto (margin : 0 auto)
    • width값이 적용된 block-lebel 요소는 가운데로 정렬되는 것이 표준이나 Quirks Mode일 때는 IE에서 적용되지 않음
      • IE Quirks Mode
      • Strict Mode
  • 단위 없는 값의 무시
    • 요소의 속성값을 설정 시, 단위를 붙이지 않을 경우 대부분의 브라우저에서 Quirks Mode에서는 값이 적용되는 반면, Strict Mode일 때는 값이 무시 됨
  • CSS 가상 선택자 관련
    • CSS 가상 선택자가 일부 브라우저의 Quirks Mode에서는 적용되지 않음
      • Quirks Mode
      • Strict Mode
  • overflow: visible
    • 특정 요소에 고정된 높이를 지정하고 overflow속성의 값을 visible로 설정한 경우, 요소 안의 내용이 많을 경우에는 요소를 벗어나서 표현되는 것이 표준이나 IE6, Quirks Mode의 IE7과 OP9에서는 그렇지 못함
      • IE6, Quirks Mode의 IE7, OP9
      • Strict Mode
  • inline 엘리먼트의 넓이 설정
    • Inline 엘리먼트에 넓이 값을 설정 시, 넓이 값이 무시되는 것이 표준이나 Quirks Mode의 IE에서는 display 속성을 inline-block으로 처리하여 넓이 설정이 적용 됨
      • IE Quirks Mode
      • Strict Mode
  • td의 font-size 속성
    • td 요소의 font-size 속성의 값을 80%로 설정한 경우, body text의 80% 크기로 설정하는 것이 표준이나 Quirks Mode에서는 대부분의 브라우저가 브라우저의 기본 폰트 크기의 80%로 설정 함
      • Quirks Mode
      • Strict Mode

QM: Quirks Mode

SM: Strict Mode

N: None Standard

S: W3C Standard

 
 

[출처] DTD의 이해|작성자 치토스

Posted by 행복한 프로그래머 궁금쟁이박
TAG

댓글을 달아 주세요