차근차근 개발중

[Html] <!DOCTYPE html>란? 본문

개발/Html

[Html] <!DOCTYPE html>란?

zaenny 2025. 2. 4. 08:50
항상 아무의식없이 <!DOCTYPE html> 사용했었는데,
갑자기 왜 이걸 선언해야하며, 선언하지 않았을때 어떤 영향이 있는지에 대해 생각해보았다.

 

 📌<!DOCTYPE>란?

  • Document Type Declaration의 약자로 '문서 타입 선언'의 시작 태그입니다.
  • HTML 태그는 아니지만, 선언된 페이지의 HTML 버전이 무엇인지를 웹 브라우저에게 알려주는 역할을 하는 선언문으로, 대소문자를 구분하지는 않습니다.
  • HTML 태그보다 먼저 선언된다 . 항상 HTML 문서의 첫 줄에 위치해야 합니다

 

● <!DOCTYPE> 선언 목적

  • DOCTYPE은 브라우저에게 어떤 HTML버전으로 문서를 해석해야 하는지 알려줍니다
  • DOCTYPE없으면 브라우저가 쿼크모드로 전환되어 이전 버전의 브라우저와 호환되는 방식으로 페이지를 렌더링합니다.
  • 현대의 <!DOCTYPE html>는 "표준 모드(Standards Mode)"를 활성화하여 최신 웹 표준에 맞게 페이지를 렌더링합니다
  • HTML 문서가 올바른 형식을 갖추고 있음을 선언합니다
  • 서로 다른 브라우저에서 일관된 렌더링을 보장하는데 도움을 줍니다
  • 예상치 못한 레이아웃 문제나 스타일 차이를 방지할 수 있습니다

 

* 표준모드란?

- 표준 모드는 W3C의 웹 표준 사양에 따라 웹 페이지를 렌더링하는 방식입니다. 쉽게 설명하면 모든 브라우저가 웹페이지를 동일한 규칙으로 보여주는 약속입니다.

 

* 쿼크모드란?

- 오래된 웹 브라우저의 동작을 모방하며 비표준적인 레이아웃 처리를 합니다. 

 

 

 

● HTML5버전과 이전버전의 차이

- HTML5에서 DOCTYPE을 선언하는 가장 기본적인 방법

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DOCTYPE 예시</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 기본적인 HTML5 문서입니다.</p>
</body>
</html>

 

이전 HTML 버전들의 DOCTYPE 선언 예시

  • HTML 4.01 Strict(가장 엄격한 규칙을 적용)
    • 디자인용 태그(<font>, <center> 등) 사용 금지
    • CSS로만 스타일 적용해야 함
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
  • HTML 4.01 Transitional(호환모드)
    • 좀 더 자유로운 규칙 적용
    • 디자인용 태그 사용 가능
    • CSS와 HTML 스타일 태그 모두 허용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 

 

● <!DOCTYPE html> 선언하지 않았을때의 현상 

  • 브라우저가 쿼크모드로 전환되어 각 브라우저마다 다르게 페이지를 표출 할 수 있습니다.
  • 일관성이 없는 레이아웃이 발생할 수 있습니다. 
  • 디자인이 깨질 수 있습니다.

 

이러한 문제들을 예방하기 위해 항상 DOCTYPE 선언을 문서 최상단에 포함하는 것이 중요하다 ! 

 

 

 

저작자표시 비영리 변경금지
Comments