728x90
반응형
- doctype이 무엇을 하는지
- 표준모드(standard mode)와 관용모드(quirks mode)의 차이
두 가지를 정의해보고자 한다.
DTD란?
- 문서 형식 정의(DTD: Document Type Definition)는 마크업 문서의 요소와 속성등을 해석하는 기준을 명시하는 것이다.
- 문서 형식에는 HTML5, XHTML, HTML 3가지 유형이 존재한다.
- 이전 버전의 HTML(HTML2 ~ HTML4)은 SGML에 기반을 두어 만들어졌기 때문에 상세한 DTD 참조가 필요하며, 이 때문에 DOCTYPE을 선언하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열을 작성해야 한다.
- HTMl 4.01 Strict 모드로 문서 형식을 정의할 경우
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DTD를 정의하지 않으면, 관용모드(quirks mode)로 렌더링된다.
- DOCTYPE 선언이 존재하지 않거나 잘못 작성할 경우, 웹 브라우저는 웹문서를 관용모드로 읽는다.
- 관용모드란 IE6 이전의 오래된 브라우저에 대응된 웹사이트의 하위 호환성을 지원하기 위해 웹 브라우저가 웹문서를 해석하는 방식이다.
- 표준모드(standard mode)는 W3C나 IETF의 표준을 엄격히 준수하여 문서를 해석한다.
- 관용모드는 같은 코드라도 브라우저마다 서로 다르게 해석하므로 다른 결과를 보여줄 수 있다.
표준모드와 관용모드의 대표적인 차이
IE 박스모델 버그
- 관용모드: width 계산할 때, padding과 border를 포함한다.
- 표준모드: width 계산할 때, padding과 border를 포함하지 않는다.
인라인 요소의 수직정렬
- 관용모드: box의 border bottom에 맞추어 이미지를 정렬한다.
- 표준모드: baseline에 맞추어 정렬한다.
테이블 안에 font-size 상속
- 관용모드: 테이블 안에서 텍스트는 기본 폰트사이즈를 상속하지 않는다.
- 표준모드: 테이블 안에서 텍스트는 기본 폰트사이즈를 상속받는다.
728x90
반응형
그리드형
'개발 > HTML5' 카테고리의 다른 글
| HTML에서 가운뎃점 · | middle dot 쉽게 찍는 법 (5) | 2020.10.12 |
|---|---|
| html img 태그에 디폴트 이미지 적용하는 방법 (show default image if image not found in HTML 5) (3) | 2020.09.08 |
| inline vs block vs inline-block 차이점 알아보기 (0) | 2020.02.15 |
| Canvas 해상도에 맞게 조정하는 방법 (0) | 2019.07.26 |
| 기초부터 배우는 HTML5 1강 (1) | 2016.09.30 |
이 포스팅은 쿠팡파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
