들어가며...
항상 모든 HTML 을 작성한다면, 그냥 <!DOCTYPE html> 을 무조건적으로 쓰라고만 배웠다.
근데, 도대체 이걸 왜쓰는 것이고, 안쓰면 어떻게 되지? 라는 궁금증에서 찾아보게 되었고, 간략하게 정리해보았다.
혹시나, DOCTYPE에 대해 자세하게 알고자 한다면, 다른 블로그로 가서 찾아보기를 추천한다.
1. doctype이란?
doctype 이란 Document Type Declaration의 약자로 번역하면, '문서 형식 선언' 이다.
즉, 문서의 유형을 정의하기 위해 사용하는 선언문이다.
문서 타입 정의는 HTML5, XHTML, HTML의 세가지 문서 유형이 존재하며, 기술한 유형에 따라 마크업 문서의 요소와 속성을 처리하는 기준이 되며, 유효성 검사에 이용된다.
지금 작성하는 tistory도, 네이버도, 구글도 내가 알고있는 모든 웹 사이트들은 문서 최상단에 <!DOCTYPE html> 이 선언되어 있다.
DOCTYPE 는
1. 웹 문서의 시작을 알려주고,
2. 웹 브라우저에서 처리할 문서가 HTML이며,
3. 어떠한 버전으로 사용했으니,
4. 해당 방식대로 해석하라는 의미를 가진다.
HTML에서는 대소문자를 구분하지 않지만, 강조를 위해 대문자로 많이 사용한다.
2. doctype 선언의 중요성?
<!DOCTYPE>은 HTML의 첫 줄에 위치하며,
웹 브라우저에게 현재 문서가 어떤 버전의 HTML로 작성되었는지를 알려주는 역할을 한다.
이 정보를 토대로 웹 브라우저는 문서를 어떻게 렌더링할지 결정하게 된다.
따라서
<!DOCTYPE>이 없으면 웹 브라우저가 문서를 잘못 해석하거나 렌더링하는 경우가 발생할 수 있다.
웹 브라우저에서는 문서 형식 선언이 없는 HTML 문서를 쿼크 모드로 렌더링하지만,
문서 형식 선언이 있는 HTML 문서를 표준 모드로 랜더링하기 때문에,
문서 형식 선언을 이용해서 어떤 웹 페이지든 모든 웹 브라우저에서 같은 레이아웃으로 제공되도록 할 수 있다.
렌더링 모드란
웹페이지를 번역, 또는 읽는 방식으로써 다양한 웹브라우저에서 웹표준에 따라 웹페이지를 올바르게 표시하도록 만들어주는 것이다.
렌더링 모드에는 표준모드(standard mode)와 비표준모드(quirks mode), 거의 표준모드(almost standard mode) 또는 엄격모드(strict mode)가 존재한다.
표준모드(standard mode)는 DOCTYPE을 선언함으로써 실행이 되고, 웹표준에 따라 렌더링(읽어짐)된다.
비표준모드(quirks mode)는 DOCTYPE을 선언하지 않으면 실행되고, 오래된 브라우저처럼 렌더링 되어지므로 올바르게 표현하지 못한다.
특히 HTML5에서는 <!DOCTYPE> 선언이 필수적이며,
이를 생략하면 웹 브라우저가 기본 모드에서 동작하지 않고, 호환성 모드에서 동작하게 된다.
이 경우에는 최신 웹 기술을 사용하는 것이 어려워지고, 웹 페이지가 올바르게 표시되지 않을 수 있다.
따라서 <!DOCTYPE> 선언은 HTML 문서에서 반드시 포함되어야 한다.
https://velog.io/@yunsungyang-omc/HTML-DOCTYPE
(HTML) DOCTYPE
"문서 형식 선언"(Document Type Declaration), 또는 doctype이란 문서의 유형을 정의하기 위해 사용하는 선언문이다.
velog.io
https://m.blog.naver.com/redtaeung/221929431362
DOCTYPE이란 도대체 무엇인가?
HTML을 사용하다보면 그냥 아무 생각없이 맨 첫째줄 위에 <!DOCTYPE>이라 치는 것을 습관...
blog.naver.com
'HTML & CSS' 카테고리의 다른 글
| [HTML] <a>태그 rel속성 noreferrer , noopener, nofollow 에 대해 알아보기 (1) | 2023.05.21 |
|---|---|
| [css layout]Flexbox와 Grid 어떤 레이아웃을 사용할까? (2) | 2023.05.17 |
| [CSS] 결합선택자 - 상속/ 형제 (0) | 2023.05.07 |
| HTML5 시멘틱 태그(Semantic Tags)를 알아보자 (1) | 2023.04.24 |
| [HTML&CSS] 절대길이(px) 와 상대길이(em , rem) (0) | 2023.04.09 |