• 0
  • 2
February 16, 2025

HTML 이란?

답변 확인

  • <!DOCTYPE>은 HTML 문서가 어떤 HTML 버전과 표준을 따르는지 브라우저에 알려주는 선언문
  • HTML 문서의 최상단에 위치하며, 웹 브라우저가 올바르게 문서를 렌더링할 수 있도록 도와줌

1. <!DOCTYPE>의 역할

  • ✅ HTML 문서가 표준 모드(Standards Mode)로 렌더링되도록 설정
  • ✅ 브라우저가 문서를 올바르게 해석할 수 있도록 도움
  • ✅ HTML 버전을 명확하게 지정하여 일관된 동작을 보장

📌 <!DOCTYPE>이 선언되지 않으면, 브라우저가 "Quirks Mode(비표준 모드)"로 동작하여 예상치 못한 스타일 오류가 발생할 수 있음.

2. HTML5 DOCTYPE 선언 방식

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>HTML 문서</title>
  </head>
  <body>
    <h1>HTML5 문서</h1>
  </body>
</html>
  • ✔️ 한 줄만 선언하면 HTML5 문서임을 명시할 수 있음
  • ✔️ HTML4, XHTML과 비교하면 훨씬 간결해짐

3. HTML4와 XHTML에서는 왜 DOCTYPE이 복잡했을까?

과거의 HTML4와 XHTML에서는 문서의 유형(표준 모드, 전환 모드, 비표준 모드)에 따라DOCTYPE을 선언해야 했음

HTML 버전 DOCTYPE 선언 방식
HTML5 <!DOCTYPE html>
HTML4.01 (표준 모드) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
XHTML 1.0 (표준 모드) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  • ✔️ HTML4와 XHTML은 DTD(문서 유형 정의, Document Type Definition) 를 명시해야 했음
  • ✔️ 브라우저가 문서를 어떻게 해석해야 하는지 명확히 알려주기 위해 선언이 길고 복잡했음
  • ✔️ HTML5에서는 이러한 복잡한 선언이 더 이상 필요하지 않음

4. DOCTYPE이 없으면 어떻게 될까?

🚨 DOCTYPE을 선언하지 않으면 발생하는 문제

  • 1️⃣ 브라우저가 Quirks Mode(비표준 모드)로 동작
  • 2️⃣ CSS 스타일이 다르게 적용될 가능성 높음
  • 3️⃣ 레이아웃이 깨지거나 예상과 다른 방식으로 렌더링될 수 있음
<!-- DOCTYPE이 없는 경우 -->
<html>
  <head>
    <style>
      div {
        width: 100px;
        padding: 20px;
      }
    </style>
  </head>
  <body>
    <div>이 요소의 크기가 예상과 다를 수 있음</div>
  </body>
</html>

✅ DOCTYPE을 선언하지 않으면 브라우저가 비표준 방식으로 스타일을 렌더링할 수 있음

5. Doctype을 꼭 선언해야 하나?

  • ✔️ DOCTYPE 선언은 필수!
  • ✔️ 선언하지 않으면 브라우저가 비표준 모드(Quirks Mode)로 렌더링하여 예측 불가능한 동작을 유발할 수 있음
  • ✔️ HTML5에서는 한 줄만 추가하면 되므로 반드시 선언해야 함.

🔹 결론

  • ✔ <!DOCTYPE html>은 HTML 문서의 표준을 지정하는 선언문이다
  • ✔ HTML5에서는 간단한 <!DOCTYPE html>만 선언하면 됨
  • ✔ DOCTYPE이 없으면 브라우저가 비표준 모드(Quirks Mode)로 동작하여 CSS 적용 오류가 발생할 수 있음
  • ✔ 정확하고 일관된 렌더링을 위해 DOCTYPE 선언은 필수! 🚀

참고 자료

Top comments (2)

  • DavidYang2월 19일

    우와 댓글이다~

  • Olivia2월 19일

    오오 ~~ :) 너무 글 좋네용