텍스트와 목록

웹 페이지의 대부분은 글입니다. HTML은 글의 의미와 구조를 표현하는 다양한 텍스트 태그를 제공합니다. 이번 강의에서는 제목과 문단부터 강조, 인용, 세 종류의 목록까지 다룹니다.

학습 목표

• h1~h6 제목과 p 문단으로 문서의 골격을 만든다.
• strong, em으로 의미 있는 강조를 표현한다.
• blockquote와 q로 인용을 마크업한다.
• 순서/비순서/정의 목록을 상황에 맞게 사용한다.

제목과 문단

h1부터 h6까지는 제목의 중요도를 나타냅니다. 숫자가 작을수록 더 중요한 제목입니다. 한 페이지에는 보통 h1을 하나만 사용하고, 그 아래로 계층을 따라 내려갑니다.

<h1>HTML 기초</h1>
<h2>텍스트 다루기</h2>
<h3>제목 태그</h3>
<p>문단은 p 태그로 표현합니다. 글의 한 덩어리를 묶는 가장 기본적인 단위입니다.</p>

⚠️ 주의 — 제목 레벨은 글자 크기를 키우려고 쓰는 것이 아닙니다. 크기는 CSS로 조절하고, 제목 태그는 오직 문서 구조를 위해 선택해야 합니다.

줄바꿈과 수평선

문단 안에서 강제로 줄을 바꿀 때는 <br>을 사용합니다. 내용의 주제가 바뀌는 지점에는 <hr>로 구분선을 넣습니다.

<p>
  서울특별시 강남구<br />
  테헤란로 123
</p>
<hr />
<p>다음 주제입니다.</p>

💡 TIP — <br>을 여러 번 써서 간격을 벌리지 마세요. 간격은 CSS의 margin으로 조절하는 것이 올바른 방법입니다.

강조 표현

글자를 강조할 때는 의미에 맞는 태그를 고릅니다. strong은 중요도가 높음을, em은 강세(어조의 변화)를 나타냅니다.

<p><strong>마감일은 오늘입니다.</strong></p>
<p>나는 <em>정말로</em> 그렇게 생각합니다.</p>

b와 i도 있지만, 의미가 담긴 강조에는 strong과 em을 우선 사용합니다.

인용

다른 출처의 글을 인용할 때는 blockquote(긴 인용)와 q(짧은 인용)를 씁니다. cite 속성에 출처 URL을 적을 수 있습니다.

<blockquote cite="https://example.com">
  <p>좋은 코드는 그 자체로 문서가 된다.</p>
</blockquote>

<p>그는 <q>다시 시작하자</q>라고 말했습니다.</p>

세 가지 목록

HTML에는 비순서 목록(ul), 순서 목록(ol), 정의 목록(dl)이 있습니다.

<ul>
  <li>사과</li>
  <li>바나나</li>
</ul>

<ol>
  <li>물을 끓인다</li>
  <li>면을 넣는다</li>
</ol>

<dl>
  <dt>HTML</dt>
  <dd>구조를 담당하는 마크업 언어</dd>
  <dt>CSS</dt>
  <dd>스타일을 담당하는 언어</dd>
</dl>

순서가 중요하지 않으면 ul, 순서나 단계가 중요하면 ol, 용어와 설명의 쌍이면 dl을 사용합니다. 목록은 안에 또 다른 목록을 넣어 중첩할 수도 있습니다.

💡 TIP — 메뉴, 단계, 항목 묶음은 거의 항상 목록입니다. div를 나열하는 대신 목록 태그를 쓰면 스크린 리더가 "항목 3개" 같은 정보를 함께 읽어 줍니다.

요약

• 제목 h1~h6은 글자 크기가 아니라 문서 구조를 위해 사용합니다.
• 강조는 의미에 맞게 strong(중요), em(강세)을 사용합니다.
• 인용은 blockquote와 q로 표현하고 출처는 cite로 남깁니다.
• 목록은 ul(비순서), ol(순서), dl(정의)로 나뉩니다.
• 간격이나 크기는 HTML이 아니라 CSS의 역할입니다.

연습문제

1. 페이지 제목 하나와 그 아래 소제목 두 개를 제목 태그로 작성하세요.
2. "환불은 7일 이내에만 가능합니다"에서 핵심 단어를 의미에 맞게 강조하세요.
3. 라면 끓이는 3단계를 적절한 목록 태그로 작성하세요.
4. 용어 "URL"과 그 설명을 정의 목록으로 작성하세요.

힌트 — 순서가 중요한지, 용어-설명 쌍인지를 먼저 따져 보면 어떤 목록을 쓸지 정해집니다.