DOCTYPE

모든 웹 문서는 문서형 정의(DTD)의 선언으로 시작됩니다.

DOCTYPE 정의 및 선언(DTD)이란?

문서형 정의(DTD - Document Type Definition)에는 TML, XHTML, HTML5 등 세 가지 문서 유형이 있으며, 마크업 문서의 요소와 속성을 처리하는 기준을 제공하고 유효성 검사에 활용됩니다.

문서형 정의를 생략할 경우, 웹 브라우저는 비표준 모드(호환 모드 - Quirks mode)로 렌더링되어, 크로스 브라우징이 어려워질 수 있습니다. 따라서, 문서형 정의는 HTML 문서의 최상위에 위치해야 합니다.

이전 버전의 HTML(HTML 4까지)은 SGML(Standard Generalized Markup Language)에 기반하여 만들어졌기 때문에 DTD 참조가 필요합니다.

따라서, DOCTYPE 선언을 하려면 공개 식별자와 시스템 식별자가 포함된 긴 문자열을 작성해야 합니다.

HTML5는 SGML에 기반을 두지 않기 때문에 DTD 참조가 필요 없습니다. 따라서, 최소한의 코드 작성으로 간단히 선언할 수 있습니다.

html

<!DOCTYPE html>

웹 서버는 각 문서를 MIME(Multipart Internet Mail Extensions)으로 구분하여 송신합니다.

콘텐츠 타입이라고도 불리는 이것은 문서의 HTTP 헤더에 포함되어 있으며, 브라우저는 이 콘텐츠 타입에 따라 문서 처리 방식을 결정합니다.

예를 들어, 콘텐츠 타입이 text/html인 문서가 수신되면 브라우저는 해당 문서를 HTML로 렌더링합니다.

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

웹 서버는 XHTML 문서를 세 가지 콘텐츠 타입 중 하나로 송신합니다. 이 중 text/html 유형은 W3C가 지원하며, 대부분의 브라우저가 인식할 수 있습니다.

이 형식으로 설정하면, 브라우저는 문서를 HTML로 인식하고, 유효성 검사 없이 잘 동작합니다. 반면, 사소한 에러가 있는 XHTML 문서는 브라우저가 XHTML 문서의 렌더링을 차단할 수 있습니다.

비표준 모드(Quirks mode)는 웹 브라우저가 오래된 웹 페이지를 호환성을 위해 의도적으로 렌더링 기준을 낮추어 처리하는 모드입니다.

이 모드는 특히 오래된 HTML 코드나 CSS 스타일을 최신 브라우저에서도 보다 정확하게 표현하기 위해 도입되었습니다.

비표준 모드에서 브라우저는 마크업 및 스타일시트에 대한 표준 기반의 엄격한 해석 방식 대신, 과거의 더 자유로운 규칙을 적용하여 문서를 렌더링합니다.

이는 과거 웹 표준이 체계적이지 않았을 때의 웹 문서들과의 호환성을 유지하기 위함입니다.

즉, 테두리(border)와 여백(padding)이 가로 너비에 포함되어 계산되기 때문에, 동일한 CSS 코드가 표준 모드와 비표준 모드에서 다르게 보일 수 있습니다.

DOCTYPE 선언 생략: HTML 문서 상단에서 DOCTYPE 선언을 생략하거나 잘못된 선언을 사용할 경우, 브라우저는 자동으로 비표준 모드로 전환하여 문서를 렌더링하게 됩니다.

크로스 브라우징은 다양한 웹 브라우저에서 웹 사이트나 웹 애플리케이션이 일관된 방식으로 동작하고 표시되도록 만드는 개발 방법을 말합니다.

이 개념은 사용자가 어떤 브라우저나 운영체제를 사용하더라도, 웹 페이지가 일관된 사용자 경험을 제공해야 한다는 원칙에 기반하고 있습니다.

크로스 브라우징의 필요성은 브라우저마다 HTML, CSS, JavaScript를 해석하고 렌더링하는 방식에 차이가 있기 때문에 생겨납니다.

플렉스박스(Flexbox) 수용도: 플렉스박스 레이아웃은 현대적인 레이아웃 설계에 있어 굉장히 유용하지만, 과거의 일부 브라우저나 특정 버전에서는 제대로 지원되지 않을 수 있습니다.

개발자는 이러한 호환성 문제를 예상하여 별도의 플렉스박스 지원 여부 검사나 폴리필(Polyfill)을 사용하는 크로스 브라우징 전략을 세울 필요가 있습니다.

예를 들어, -webkit-, -moz-, -ms-, -o- 같은 접두사를 사용해야 같은 스타일이 여러 브라우저에서 일관되게 표시됩니다. 이는 브라우저별로 최신 CSS 스타일링 기능을 사용하기 위한 크로스 브라우징의 일환입니다.