Ch.1 웹의 시작 — 첫 HTML 페이지

HTML 문서의 뼈대

HTML 문서의 기본 구조(DOCTYPE, html, head, body)를 이해한다head와 body의 역할 차이를 설명할 수 있다올바른 HTML 뼈대를 직접 작성할 수 있다

모든 집에는 설계도가 있듯 HTML에도 뼈대가 있다

집을 지으려면 기초 공사부터 해야 합니다. 웹 페이지도 마찬가지로, 정해진 뼈대 위에 내용을 쌓아 올립니다.

HTML 파일은 어떤 구조로 시작해야 할까?

DOCTYPE, html, head, body — 이 네 가지가 모든 HTML 문서의 출발점입니다.

article

핵심 내용

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

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

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

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

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

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

<!DOCTYPE html>은 HTML 태그이다

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

HTML 문서의 뼈대

key

핵심 용어

📋

<!DOCTYPE html>

'이 문서는 HTML5입니다'라고 브라우저에 알림

📦

<html>

문서 전체를 감싸는 최상위 태그

⚙️

<head>

보이지 않는 설정 (제목, 문자 인코딩)

👁️

<body>

화면에 보이는 모든 내용

edit_note

정리 노트

HTML 문서의 뼈대

HTML 기본 구조

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

head vs body

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

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

image

시각 자료

check_circle

핵심 정리

  • 1모든 HTML은 DOCTYPE → html → head + body 구조
  • 2head는 보이지 않는 설정, body는 보이는 내용
  • 3<meta charset="UTF-8">로 한글 깨짐을 방지한다

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작