topic★★★★★난이도 · 약 15분

HTML 문서의 뼈대

DOCTYPE, html, head, body — 모든 HTML 문서의 필수 뼈대 4가지.

#DOCTYPE#html#head#body#구조

왜 배우는가

집을 지으려면 기초 공사부터. 웹 페이지도 정해진 뼈대 위에 내용을 쌓아 올린다. 이 구조를 모르면 CSS 연결, 문자 인코딩, SEO 설정이 모두 불가능하다.

모든 HTML 문서는 같은 뼈대에서 시작합니다

html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>페이지 제목</title>
</head>
<body>
  <!-- 여기에 보이는 내용을 작성 -->
</body>
</html>

모든 HTML 문서의 출발점. DOCTYPE 선언 → html → head + body 순서.

태그	역할
`<!DOCTYPE html>`	'이 문서는 HTML5입니다'라고 브라우저에 알림
`<html>`	문서 전체를 감싸는 최상위 태그
`<head>`	보이지 않는 설정 (제목, 문자 인코딩)
`<body>`	화면에 보이는 모든 내용

HTML 문서는 루트 <html>에서 뻗어나가는 트리 — 브라우저는 이 DOM 트리를 따라 화면을 그린다

head는 '보이지 않는 설정' body는 '보이는 내용'

구분	<head> — 설정 영역	<body> — 화면 영역
코드 예시	`<meta>`, `<title>`, `<link>`	`<h1>`, `<p>`, `<img>`
역할	브라우저 탭 제목, CSS 연결 등	사용자 눈에 보이는 모든 것

head 안의 내용은 화면에 나타나지 않습니다. 브라우저 탭 제목(<title>)이나 CSS 파일 연결 등 '뒷무대' 설정을 담당합니다.

나만의 홈페이지 뼈대를 직접 작성해봅시다

html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>나의 홈페이지</title>
</head>
<body>
  <h1>안녕하세요!</h1>
  <p>저는 웹 개발을 배우고 있습니다.</p>
</body>
</html>

나만의 HTML 문서를 만드는 코드. head에 제목과 인코딩, body에 보이는 내용을 작성한다.

핵심 개념	설명
`<!DOCTYPE html>`	HTML5 문서임을 브라우저에 선언하는 첫 줄
`<html>`	문서 전체를 감싸는 최상위 태그
`<head>`	메타 정보(제목, 인코딩, CSS 연결)를 담는 영역
`<body>`	화면에 보이는 내용이 들어가는 영역

구분	설명
head	사용자 눈에 보이지 않는 설정 정보
body	사용자 눈에 직접 보이는 콘텐츠

HTML 문서는 항상 <!DOCTYPE html> → <html> → <head> + <body> 순서입니다.

실기 드릴 3문항

edit실기 드릴 · 단답형

<head> 태그 안에 들어가는 것은?

check_circle실기 드릴 · OX

<!DOCTYPE html>은 HTML 태그이다.

edit실기 드릴 · 단답형

다음 중 HTML 문서의 올바른 기본 구조는?