웹브라우저의 쿽스 모드와 <!DOCTYPE html> 문서 타입 설정
현재 표준 html 문서를 만들려면 첫 줄에 <!DOCTYPE html>를 입력해야 한다. 이러지 않으면 아래와 같은 문제가 생긴다.
html 문서에 아래 한 줄만 입력해 본다.
<p>test paragraph</p>그러고 웹페이지를 열어 보면 위 문구의 위와 왼쪽 여백이 8px로 확인될 거다. 이 여백은 <body>의 기본 여백이다. <p>의 그것은 1em 즉 16px이다. 현재 표준인 html 5에 따르면 이 경우 겹친 여백이 접혀서 위 여백은 16px이 되어야 한다. margin collapse는 큰 쪽으로 되기 때문이다. 이 현상은 사소한 게 아니다. 맨 위에서 이렇게 뭉개지면 줄줄이 망가질 수 있다.
이렇게 위의 코드가 표준 규약에 따라 처리되지 않은 건 브라우저가 쿽스 모드로 인식했기 때문이다. quirks mode란 오래 전 브라우저들에 통하던 규약이다. 최신의 브라우저에 표준 html을 이용한다면 위와 같이 문서 타입을 특정해서 표준 모드 또는 no-quirks mode로 작동하게 해야 한다. 그러지 않으면 크롬 데브툴즈로 볼 때 쿽스 이슈에 대한 내용이 뜬다.
위 코드 위에 <!DOCTYPE html>를 입력하면 위 문구가 더 아래에 출력되는 걸 확인할 수 있다.