DOCTYPE이란?
DOCTYPE(Document Type Declaration)은 HTML 문서의 맨 첫 줄에 위치하는 선언문으로, 브라우저에게 어떤 HTML 버전을 사용하여 문서를 해석할지 알려주는 역할을 한다.
핵심 요약
간단히 말하면:
<!DOCTYPE html>= "브라우저야, 이 문서는 최신 HTML 표준으로 작성했으니 표준 모드로 렌더링해줘"
HTML5의 DOCTYPE
<!DOCTYPE html>- HTML5에서는 매우 간단하게 선언한다
- 대소문자 구분 없음 (하지만 일반적으로 대문자 사용)
- 반드시 문서의 첫 번째 줄에 위치해야 함
DOCTYPE의 역할
1. 문서 유형 지정
- 브라우저에게 HTML 버전과 문법 규칙을 알려준다
- 올바른 렌더링 모드를 선택하게 한다
2. 렌더링 모드 결정
- 표준 모드(Standards Mode): 최신 웹 표준에 따라 렌더링
- 호환 모드(Quirks Mode): 오래된 브라우저의 비표준 동작을 모방
- 거의 표준 모드(Almost Standards Mode): 표준 모드와 거의 동일하지만 일부 차이 존재
DOCTYPE이 없을 때의 문제점
❌ 문제 상황:
- 브라우저가 호환 모드로 동작
- CSS 박스 모델이 다르게 작동
- JavaScript의 일부 기능이 제대로 작동하지 않을 수 있음
- 브라우저마다 다르게 렌더링될 가능성
과거 HTML 버전의 DOCTYPE 예시
HTML 4.01 Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">HTML 4.01 Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">HTML5 DOCTYPE의 장점
✅ 장점들:
1. 간결함: <!DOCTYPE html>로 매우 단순하다
2. 하위 호환성: 모든 브라우저에서 표준 모드를 트리거한다
3. 미래 지향적: HTML의 미래 버전과도 호환된다
실제 사용 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문서 제목</title>
</head>
<body>
<main>
<h1>메인 제목</h1>
<p>내용</p>
</main>
</body>
</html>실무 가이드
✅ DO (해야 할 것)
- HTML 문서 작성 시 항상 맨 첫 줄에
<!DOCTYPE html>작성 - 웹 표준을 준수하여 크로스 브라우저 호환성 확보
❌ DON'T (하지 말 것)
- DOCTYPE 선언 생략
- DOCTYPE 앞에 다른 코드나 주석 작성
- 오래된 DOCTYPE 선언 사용 (특별한 요구사항이 없는 한)
결론
특별한 경우가 아닌 이상 최신 웹 표준에 따라 작성된 코드를 렌더링하려면 <!DOCTYPE html>을 반드시 적어줘야 한다.
DOCTYPE 선언은 웹 표준을 준수하고 크로스 브라우저 호환성을 보장하는 데 필수적인 요소다.
