기초 해부: DOCTYPE & HTML 구조

핵심 개념

<!DOCTYPE html>은 브라우저에게 '이건 최신 HTML5야!'라고 알려주는 신호탄이에요. <html>, <head>, <body>로 이어지는 뼈대를 분석해봅시다.

코드 분석

HTML5📋 코드 (10줄)

<!DOCTYPE html>
<html>
<head>
  <title>기초 해부</title>
</head>
<body>
  <h1>안녕, HTML5!</h1>
  <p>이 문서는 표준 HTML5 구조를 따르고 있습니다.</p>
</body>
</html>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 HTML 코드의 DOCTYPE/html/head/body 구조에서
빠진 메타 태그와 잘못된 nesting을 찾아
수정 코드와 이유를 함께 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

DOCTYPE이 왜 필요한지
쿼크 모드와 표준 모드의 차이를
실제 사이트 렌더링 비교 예시로 보여줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 HTML 페이지의 head 영역 전체를 분석해서
중복·누락·순서 오류를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

2026년에도 <!DOCTYPE html>을 매번 써야 하는지,
XHTML이나 다른 doctype은 완전히 죽었는지
현실적으로 알려줘.

⭐ 이것만 기억하세요

기초 해부: DOCTYPE & HTML 구조는 이 3가지만 확실히 잡으세요

1.DOCTYPE이 없으면 브라우저가 quirks mode로 렌더링해서 CSS 레이아웃이 예측 불가하게 깨집니다

2.HTML 문서는 DOCTYPE → html → head → body, 이 4단계 뼈대 위에서만 정상 동작합니다

3.다음 챕터에서 이 뼈대 안에 header, footer, main 같은 시맨틱 태그로 의미를 부여하는 법을 배웁니다

진행도 4 / 33