이 질문을 왜 했을까요?
저는 HTML 코드의 최상단에 존재하는 DOCTYPE을 보고 그냥 지나쳤냐, 아니면 왜 사용하냐 생각을 해보았다던가, 기술 스택에 HTML5를 작성하면서 HTML4와의 차이를 이해하고 있느냐로 판단하고 있습니다.
프런트엔드 작업은 크게 HTML로 뼈대를 구성하고 CSS로 디자인을 꾸미고 JAVASCRIPT로 동작을 붙이는 과정이라고 할 수 있습니다.
그중 HTML의 뼈대를 만드는 과정에서, 먼저 등장하는 코드는 HTML, HEAD, BODY 태그가 아닌 DOCTYPE입니다.
가장 먼저 나왔다는 말은 어찌 보면 가장 중요하다는 말로도 해석될 수 있는데 DOCTYPE의 역할은 무엇일까요?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>위 코드는 vscode의 에밋 단축 명령어!를 사용하면 나오는 코드입니다.
html 태그 내에 head, body 태그가 존재하며 가장 최상단에 <! DOCTYPE html>이 존재합니다.
HTML을 통해 '뼈대'를 구성한다고 했는데, 그 뼈대는 브라우저 상의 화면에 렌더링 되는 것을 의미합니다.
HEAD 태그의 내용들은 보통 화면단에는 출력되지 않아도 이 문서가 어떻게 해석될 것인지, 어떤 뷰포트를 가질 것인지
어떤 제목을 가질 것인지를 나타냅니다. BODY 태그 내에 내용들은 사용자에게 출력됩니다.
그렇다면 브라우저에게, 이 문서가 HTML 문서이며, 버전은 5이다를 알려줄 필요가 있다고 생각합니다.
그래서 HTML5에 간략화된 <!DOCTYPE html>을 통해서 HTML로 작성하였으며 버전은 5 이다를 브라우저에게 알려줍니다.
최상단에 DOCTYPE이 존재하지 않게 되면 예상과는 다르게 브라우저에 출력될 수 있다고 생각합니다.
DOCTYPE의 필요성은 인지했다고 가정하고, HTML4에서 HTML5로 넘어오면서 왜 간략화됐을까요?
HTML5이전 버전에서는 모드별로 다른 모드를 제공했다고 합니다. 엄격 모드, 호환 모드, 프라임 셋 모드 등이 존재하였죠
HTML5에 들어와 그전 버전에 비해 엘리먼트, 어트리뷰트, API 등이 추가되었고 DOCTYPE도 포함하여
간략화됐다는 게 특징으로 느껴졌습니다.
추측으로는 과거 브라우저들은 통일성이 없었고 '표준'이라는 개념이 없었다면 (넷스케이프가, ms등으로 갈림)
현대의 브라우저들은 차이점은 존재하되 표준이라는 기준점을 세운 것 같습니다. 그리하여 <!DOCTYPE html>로 간략화되고 표준 호환 모드를 지원하게 되어 신경 쓸 부분을 줄일 수 있게 됐다고 느낍니다.
이는 개발자의 생산성 향상에 많은 영향을 미쳤다고 판단됩니다.
'공부 > TIL-D' 카테고리의 다른 글
| 프레임워크 라이브러리 차이 (0) | 2019.06.04 |
|---|---|
| float , float 부작용 해제하는 방법 (0) | 2019.06.03 |
| style (0) | 2019.06.01 |
| angular 자식에게 접 (0) | 2019.05.31 |
| interaction (0) | 2019.05.30 |
