비표준 모드quirks mode, 표준 모드standards mode 차이와 DOCTYPE 선언
HTML과 CSS를 공부하다 보면 이런 단어를 많이 접합니다.
비표준 모드quirks mode,
표준 모드standards mode,
거의 표준 모드 almost standards mode , 엄격 모드strict mode
영어 자체의 뜻도 어렵지만, 우리말로 써도 솔직히 무슨 말인지 감이 잡히지 않았습니다.. -_-;
그래서 이들 단어 유래(?)와 뜻을 한 번 정리해 보았습니다.
|
상호호환성을 위한 렌더링 모드 |
웹페이지는 HTML과 CSS로 만들어지는데, 오래된 브라우저는 HTML과 CSS 명세(W3C 표준)가 완성되기도 전에
개발되어서, 이들 표준에 잘 부응하지 못하였습니다.
크로스브라우징, 웹표준과 핵(hack)
특히 예전에는 IE가 높은 시장 점유율이 보였기 때문에, 구 IE에 의존하여 설계된 웹페이지의 경우
웹 표준에 따라 설계된 웹 페이지를 올바로, 의도한 대로 표시할 수 없었습니다.
이런 웹페이지들의 호환성을 위해 최근 주요 웹 브라우저는 다양한 렌더링 모드를 지원합니다.
*렌더링 모드rendering mode 란, 웹 페이지를 번역 또는 읽는 방식
렌더링 모드를 어떻게 선택할까?
HTML 작성할 때 DOCTYPE을 선언하면 표준 모드로 실행하며, DOCTYPE 선언이 없으면 비표준 모드로 실행합니다.
일부러 비표준 모드quirks mode를 쓰고 싶은 사람은 없으므로 되도록 웹페이지는 표준에 따라 작성할 것이 좋겠지요?
다양한 렌더링 모드
표준 모드 standards mode : HTML과 CSS 명세(표준)에 따라 렌더링되며(읽으며)
비표준 모드 quirks mode : 오래된 브라우저의 행동을 모방하도록 만들어짐
거의 표준 모드 almost standards mode 또는 엄격 모드strict mode :
사파리, 오페라 7.5+, Gecko 기반의 모든 브라우저 (Firefox 1.0.1+, IE8)
거의 표준 모드는 표준 모드와 한가지만 빼고 동일함.
table 셀에서 비표준모드로 실행하고, 그외 나머지는 표준을 따름
따라서, 테이블 안에 조각난 이미지를 넣을 때, 표준 모드보다 비표준 모드, 거의 표준 모드일 때
이미지 간격이 떨어질 가능성이 덜함
비표준 모드과 표준 모드의 차이
IE 박스 모델 버그
-비표준 모드: width 계산 시, padding, border 를 포함 함.
-표준 모드: width 계산 시, padding, border를 포함하지 않음.
박스 모델은 다음 글에서 더 자세히 다루어보겠습니다~
인라인 요소의 수직 정렬
-비표준 모드: 박스의 border bottom에 맞추어 이미지를 정렬
-표준 모드: baseline에 맞추어 정렬
table 안의 font size 상속
-비표준 모드: table 안에서 텍스트는 기본 font size를 상속하지 않음
-표준 모드: table 안에서의 텍스트는 기본 font size값을 상속 함.
quirk.htm
|
DOCTYPE 선언, 여러가지 형태 |
DOCTYPE 선언.txt
위에서 DOCTYPE을 선언해야 브라우저는 표준 모드로 실행한다고 했습니다.
DOCTYPE은 document type의 역자이며, DTD란 document type definition(문서 유형 정의)의 약자입니다.
DOCYTPE 은 html 문서 맨 첫줄에 씁니다.
▶사용 예
|
<!DOCTYPE html> <body> </html> |
HTML 5
HTML 4.01 는 세가지 DTD가 있는데, DTD는 지원하는 요소에 따라 다름
HTML 4.01 Strict DTD
HTML 모든 요소와 속성을 포함. 하지만 표현적인 것과 퇴화 요소는 포함하지 않음.
예: font 태그 지원 안 함. frameset 지원 안 함.
HTML 4.01 Transitional DTD
html모든 요소와 속성 포함. 표현적인 것과 퇴화 요소도 포함 (font 태그 지원)
frameset 지원 안 함.
Strict DTD에 있는 것 + 퇴화 요소와 속성(대부분 시각적 표현에 관한 것).
HTML 4.01 Frameset DTD
Transitional DTD 과 똑같음. 하지만 frameset을 허용함.
XHTML 1.0 Strict
HTML모든 요소와 속성을 포함. 하지만 표현적인 것과 토회 요소는 포함하지 않음
예: font 태그 지원 안함. frameset 지원 안 함.
markup은 잘 조직된 XML로 쓰여져야 함.
XHTML 1.0 Transitional
HTML모든 요소와 속성을 포함. 표현적인 것과 퇴화 요소는 포함( font 태그 지원)
frameset 지원 안 함.
markup은 잘 조직된 XML로 쓰여져야 함.
XHTML 1.0 Frameset
XHTML 1.0 Transitional과 같음. 하지만 frameset 을 허용함.
XHTML 1.1
XHTML 1.0 Strict와 같음. 하지만 modules을 추가하도록 허용
예를 들어 동아시아언어를 위한 ruby 지원 함.
「관련글」
DOCTYPE 선언하는 이유와 버전별 선언 정리 (HTML5, HTML 4, XHTML)
「참조」
http://en.wikipedia.org/wiki/Quirks_mode
http://en.wikipedia.org/wiki/Document_type_declaration
http://www.w3.org/International/articles/serving-xhtml/Overview.en.php#quirks
http://www.w3schools.com/tags/tag_doctype.asp
'css' 카테고리의 다른 글
| text-decoration 속성(none, underline, overline, line-through) (1) | 2014.06.09 |
|---|---|
| [html/css] vertical-align 속성 자세히 알기(수직 정렬) (3) | 2014.06.05 |
| [html/css]background 속성(배경 전체 지정) (1) | 2014.05.30 |
| [html/css]background-size 속성(배경이미지 크기 조절) (2) | 2014.05.29 |
| [html/css] line-height 속성 배우기 (6) | 2014.05.27 |
댓글