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

제목과 문단으로 말하기

제목 태그(h1~h6)의 계층 구조를 이해한다문단 태그(p)와 줄바꿈(br), 수평선(hr)을 사용할 수 있다태그의 열기/닫기 규칙과 들여쓰기를 지킨다

글에도 크기와 순서가 있어야 읽기 쉽다

신문 기사를 떠올려보세요. 큰 제목, 작은 소제목, 본문이 명확히 구분되어 있습니다. 웹 페이지도 같은 방식으로 내용을 정리합니다.

HTML에서 제목과 본문은 어떻게 구분할까?

h1~h6 제목 태그와 p 문단 태그 — 콘텐츠에 구조를 부여하는 가장 기본적인 도구입니다.

article

핵심 내용

HTML에는 6단계의 제목 크기가 있습니다

<h1>가장 큰 제목 (페이지 당 1개)</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

h1은 페이지에서 한 번만 사용합니다 (신문의 대제목). h2는 큰 섹션 제목, h3는 소제목으로 사용합니다. 순서를 건너뛰지 마세요 (h1 → h3 ❌, h1 → h2 → h3 ✅).

본문 텍스트는 p 태그로 감쌉니다

<p>이것은 첫 번째 문단입니다. HTML에서 문단은 p 태그로 만듭니다.</p>

<p>이것은 두 번째 문단입니다.<br>이렇게 줄을 바꿀 수도 있습니다.</p>

<hr>

<p>수평선(hr) 아래의 새로운 내용입니다.</p>

홈페이지에 제목과 문단을 추가해봅시다

h1 태그를 한 페이지에서 여러 번 사용해도 되는가?

HTML에서 줄바꿈을 만드는 태그는 <___> 이다

<hr> 태그는 닫는 태그가 필요하다

제목과 문단

key

📄

문단 — 텍스트 블록을 만든다

↩️

줄바꿈 — 닫는 태그가 없다 (셀프 클로징)

➖

수평선 — 내용을 구분하는 가로 줄

edit_note

★

h1은 페이지당 1개, 나머지 제목은 h2 → h3 순서로 계층을 지키세요.

check_circle

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