html작성시에 맨 위 DOCTYPE이라는 부분이 보인다.
이것을 아무 생각없이 사용했던 지난날을 반성하고 알아보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>DOCTYPE이란 Document Type의 약자로 html이 어떤 버넌으로 작성되어있는지 미리 선언해 웹 브라우저가 내용을 올바르게 표시할 수 있도록 해주는 것이다.
"문서 형식 선언"(Document Type Declaration) 또는 DOCTYPE이란 어떤 SGML이나 XML 기반 문서 내에 그 문서가 특정 문서 형식 정의(DTD)를 따름을 지정하는 것이다. 본래 DTD에 기반한 SGML 도구를 이용해 문서 해석 가능성과 유효성을 검사하기 위한 목적으로 문서 내에 삽입되었다.
위 얘기를 기반으로 다시 보면 내가 작성하려는 html문서가 어떤 문서 형식을 가지는지 선언하는것을 말한다.
과연.. 이전버전들의 html에서는 어떻게 작성되었는지 궁금해 찾아보았다. 확실히 지금과는 다르게
<!DOCTYPE html>이라는 모양이 아니라 뒤에 되게 길게 작성되었다. 종류도 많은데, 그 중에 HTML4.01 의 strict 모드만 살펴보자면
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">이런식으로 길게 적히는것을 볼 수 있다.
그러나 HTML5에서는 문서 형식 선언(DOCTYPE)이 불필요하지만 웹 브라우저들의 표준 모드 활성화를 위해 최소한의 형태로 유지되어 사용된다.
라고하여
<!DOCTYPE html>이라고 작성함을 알 수 있었다.
추가적으로 <!DOCTYPE>으로 선언하는것을 해 주지 않을경우 크로스 브라우징 이슈가 발생하게 된다.
이 이슈가 무엇이냐면,
브라우저는 기본적으로 웹표준화 기구에서 정의한 스펙을 따라 동작하며 이 스펙에 따라서 html 등을 작성한다면 어떠한 브라우저를 쓰더라도 작동이 되어야 하지만, 작동되지 않거나 다르게 작동되는 브라우저가 있을 수도 있다.
이러한 것을 크로스 브라우징 이슈 라고하고,
따라서 이러한 문제를 해결하기 위해서는 브라우저간에 호환되는 방법을 사용하는것이 좋은데 <!DOCTYPE html> 이라고 적어주는 것도 바로 이러한 이유 때문이다.
