HTML

제목·문단·목록으로 내용 나누기

내용의 계층은 제목으로, 여러 항목은 목록으로 표현합니다.

이럴 때 필요해요

공연 안내를 읽기 쉬운 문서 구조로 정리합니다.

문서의 큰 제목 아래에 소제목과 본문을 놓으면 내용을 구분하기 쉽습니다. h1부터 h6는 제목의 깊이를 나타내며, 단순히 글자를 작게 만들기 위한 도구는 아닙니다.

여러 공연이나 준비물을 나열할 때는 ul 안에 li를 넣습니다. 순서 자체에 의미가 있다면 ol을 사용합니다. 줄바꿈 여러 개로 목록을 흉내 낼 필요가 없습니다.

아래 문서에서 준비물 제목은 h2이고 목록 항목은 li입니다. 항목을 추가하려면 li를 하나 더 넣습니다. 간격과 글자 크기는 CSS로 바꿀 수 있습니다.

동작을 설명하는 읽기 전용 예제입니다.

example.html

<h1>공연 안내</h1>
<p>입장은 오후 6시부터입니다.</p>
<h2>준비물</h2>
<ul><li>예매 내역</li><li>신분증</li></ul>

html · 읽기 전용4줄

준비물 두 개가 순서 없는 목록으로 표시됩니다.

입장 절차처럼 순서가 중요한 목록은 무엇으로 만들까요?

생각할 단서 예제의 값을 하나 바꿔 보고, 바뀌는 부분과 그대로인 부분을 구분해 보세요.

예시 답변 확인

ol 안에 각 단계를 li로 작성합니다. 준비물처럼 순서가 중요하지 않은 항목은 ul로 나타낼 수 있습니다.

문장을 그대로 외우기보다 예제의 값과 실행 흐름을 떠올리며 설명해 보세요.