한 줄 요약 — <ul>은 순서가 상관없는 목록, <ol>은 순서가 의미를 갖는 목록, <dl>은 "이름과 그 설명"을 짝지어 적는 목록입니다. 셋의 선택 기준은 모양이 아니라 "이 항목들 사이에 순서가 있는가, 짝이 있는가"입니다.

학습 목표#

  • 순서에 의미가 있는지로 <ul>과 <ol>을 갈라 고를 수 있다.
  • <dl>·<dt>·<dd>로 이름과 설명을 올바르게 짝지을 수 있다.
  • 들여쓰기를 만들려고 리스트를 쓰지 않는 이유를 안다.
  • 리스트 안에 리스트를 넣는 중첩 구조를 만들 수 있다.

오늘의 비유 — 장보기 메모(ul), 요리 순서(ol), 단어장(dl)의 차이#

부엌 근처에 붙여 둔 메모 세 장을 떠올려 봅니다. 첫 번째는 장보기 메모입니다. "우유, 달걀, 사과" — 우유를 먼저 담든 사과를 먼저 담든 상관없습니다. 순서가 없는 목록, 그게 <ul>입니다.

두 번째는 요리 순서입니다. "1. 물을 끓인다 2. 면을 넣는다 3. 3분 뒤 건진다" — 여기서는 순서가 바뀌면 요리가 안 됩니다. 번호가 의미를 갖는 목록, 그게 <ol>입니다.

세 번째는 단어장입니다. 왼쪽에 단어, 오른쪽에 뜻이 한 쌍씩 적혀 있습니다. 항목 하나가 "이름과 설명"의 짝으로 되어 있는 목록, 그게 <dl>입니다. 오늘은 이 세 장의 메모를 HTML 리스트로 옮기는 법을 배웁니다.

핵심 개념#

가장 단순한 리스트는 항목 몇 개를 감싼 형태입니다.

<ul>
  <li>우유</li>
  <li>달걀</li>
  <li>사과</li>
</ul>

<ul>(unordered list, 순서 없는 목록)이 바깥을 감싸고, 항목 하나하나는 <li>(list item)로 적습니다. 글머리 기호(•)는 브라우저가 기본으로 붙인 것이라, 나중에 CSS로 모양을 바꾸거나 없앨 수 있습니다.

ul과 ol — 갈림길은 "순서에 의미가 있는가"#

순서가 바뀌어도 뜻이 그대로면 <ul>, 순서가 바뀌면 뜻이 깨지면 <ol>(ordered list, 순서 있는 목록)입니다.

<ol>
  <li>물을 끓인다</li>
  <li>면을 넣는다</li>
  <li>3분 뒤 건진다</li>
</ol>

<ol>은 1, 2, 3 번호를 자동으로 붙입니다. 직접 "1. "을 글자로 치지 않습니다. 중간에 항목을 하나 끼워 넣어도 번호가 알아서 다시 매겨집니다.

번호를 3부터 시작하거나, 숫자 대신 가·나·다로 바꾸고 싶으면 글자를 고치는 게 아니라 속성으로 지정합니다.

<ol start="3" type="a">
  <li>약불로 줄인다</li>
  <li>5분 더 끓인다</li>
</ol>

start는 시작 번호, type은 번호 모양(1·a·A·i)입니다. 순서를 거꾸로 매기고 싶으면 reversed를 붙입니다.

dl — 이름과 설명을 짝짓는 목록#

<dl>(description list, 설명 목록)은 "이름과 그 설명"이 한 쌍인 자료에 씁니다. 짝의 왼쪽은 <dt>(description term, 이름), 오른쪽은 <dd>(description details, 설명)입니다.

<dl>
  <dt>HTML</dt>
  <dd>웹 문서의 구조를 적는 언어</dd>
  <dt>CSS</dt>
  <dd>그 구조에 모양을 입히는 언어</dd>
</dl>

단어장처럼 "단어 → 뜻"이 반복되는 자료, 또는 상품 사양표("무게 → 1.2kg", "색상 → 검정")처럼 항목마다 이름과 값이 짝지어진 자료에 잘 맞습니다.

리스트 안의 리스트 — 중첩#

장보기 메모를 "채소", "유제품"으로 묶고 싶을 때처럼, 항목 안에 다시 목록을 넣을 수 있습니다.

<ul>
  <li>채소
    <ul>
      <li>당근</li>
      <li>양파</li>
    </ul>
  </li>
  <li>유제품
    <ul>
      <li>우유</li>
    </ul>
  </li>
</ul>

핵심은 안쪽 <ul>을 <li> 바깥이 아니라 <li> 안에 넣는 것입니다. 그래야 "채소에 딸린 항목"이라는 관계가 살아납니다.

함께 따라하기 — 세 장의 메모를 각각 알맞은 리스트로#

지난 회에 만든 폴더에 day-06 폴더와 index.html을 두고, <body> 안을 이렇게 채웁니다.

<h1>이번 주 부엌 메모</h1>

<h2>장 볼 것</h2>
<ul>
  <li>우유</li>
  <li>달걀</li>
  <li>사과</li>
</ul>

<h2>라면 끓이는 순서</h2>
<ol>
  <li>물 550mL를 끓인다</li>
  <li>면과 스프를 넣는다</li>
  <li>3분 뒤 불을 끈다</li>
</ol>

<h2>알아 둘 용어</h2>
<dl>
  <dt>중불</dt>
  <dd>불꽃이 냄비 바닥에 닿을락 말락 한 세기</dd>
</dl>

저장하고 브라우저로 열어보면, 장 볼 것은 글머리 기호(•)가 붙은 목록으로, 라면 순서는 1·2·3 번호가 자동으로 붙은 목록으로 나옵니다. 용어 부분은 '중불'이 한 줄, 그 설명이 살짝 들여쓰기된 줄로 짝지어 보입니다. 번호를 직접 친 적이 없는데도 순서가 매겨지는 건, <ol>이 "이건 순서 있는 목록"이라는 의미를 갖고 있어 브라우저가 번호를 대신 붙였기 때문입니다.

흔한 실수 3가지#

1. 단순 들여쓰기 용도로 ul을 쓴다#

글을 안쪽으로 밀어 넣고 싶어서 <ul>로 감싸는 경우입니다.

<p>공지사항</p>
<ul>
  <li>다음 주는 휴무입니다.</li>
</ul>

(이 코드는 의도와 다르게 동작합니다.) 들여쓰기는 됩니다. 하지만 화면 낭독기는 이걸 "항목 1개짜리 목록"으로 읽어, 듣는 사람에게는 굳이 "목록 시작, 항목 하나, 목록 끝"이라고 들립니다. 한 문장은 목록이 아니라 문단입니다.

<p>공지사항</p>
<p>다음 주는 휴무입니다.</p>

들여쓰기로 보이고 싶었던 것뿐이라면 그건 여백의 문제라, CSS를 배우는 회에서 다룹니다. 리스트는 정말로 항목이 여러 개 나열될 때만 씁니다.

2. 순서가 의미 있는데 ul을 쓴다 (또는 그 반대)#

조리 순서를 <ul>로 적는 경우입니다.

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

(이 코드는 화면에는 멀쩡해 보이지만 의미가 틀렸습니다.) 글머리 기호가 붙으니 보기에는 괜찮습니다. 하지만 <ul>은 "순서는 상관없다"는 뜻이라, 면을 먼저 넣으라는 건지 물을 먼저 끓이라는 건지 의미가 사라집니다.

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

순서가 결과를 바꾸면 <ol>, 바꿔도 상관없으면 <ul>입니다. 반대로 추천 메뉴를 굳이 <ol>로 적으면, 1번이 더 좋은 메뉴라는 없던 우선순위가 생깁니다.

3. dl의 dt/dd 쌍을 잘못 묶는다#

이름과 설명을 둘 다 <dt>로 적어 짝을 어긋나게 두는 경우입니다.

<dl>
  <dt>중불</dt>
  <dt>불꽃이 바닥에 닿을락 말락 한 세기</dt>
</dl>

(이 코드는 설명까지 이름으로 표시됩니다.) 둘 다 <dt>라서 브라우저와 보조기기는 "이름이 두 개"라고 읽습니다. 설명은 <dd>여야 합니다.

<dl>
  <dt>중불</dt>
  <dd>불꽃이 바닥에 닿을락 말락 한 세기</dd>
</dl>

<dt>는 이름, <dd>는 그 이름의 설명입니다. 한 이름에 설명이 여럿이면 <dd>를 여러 개 이어 붙일 수 있고, 같은 설명에 이름이 여럿이면 <dt>를 여러 개 둘 수도 있습니다.

오늘 배운 것 체크리스트#

  • 순서에 의미가 있는지로 <ul>과 <ol>을 갈라 쓸 수 있다.
  • <ol>의 번호를 글자로 치지 않고 start·type으로 바꾼다.
  • <dl>에서 <dt>는 이름, <dd>는 설명으로 짝짓는다.
  • 들여쓰기 목적으로 리스트를 쓰지 않는다.

자주 묻는 질문#

Q. 내비게이션 메뉴는 꼭 <ul>로 만들어야 하나요?

A. 문법상 강제는 아니지만, 메뉴는 보통 "여러 링크의 나열"이고 항목 사이에 정해진 순서가 없으므로 <ul>이 가장 자연스럽습니다. 실제로 많은 사이트가 <nav> 안에 <ul>을 넣어 메뉴를 만듭니다. 1순위·2순위처럼 순서 자체가 정보일 때만 <ol>을 고려합니다.

Q. 순서 있는 리스트의 번호를 5부터 시작하거나 거꾸로 매길 수 있나요?

A. 네. <ol start="5">로 시작 번호를, type="a"로 번호 모양을, reversed로 역순을 지정합니다. 번호를 글자로 직접 치면 항목을 추가·삭제할 때마다 다시 손봐야 하므로 속성으로 두는 편이 안전합니다.

Q. 정의 리스트(<dl>)는 실제로 언제 쓰나요?

A. "이름과 그에 대한 설명"이 반복되는 자료에 씁니다. 용어집, 자주 묻는 질문의 질문·답 묶음, 상품 사양표(무게·색상·재질처럼 항목명과 값의 짝)가 대표적입니다. 그냥 줄을 나열하고 싶을 뿐이면 <ul>이 맞습니다.

다음 시간 예고#

내일은 링크와 이미지 — a 태그, img 태그, 그리고 alt가 SEO에 미치는 영향을 다룹니다. 오늘 항목을 나열하는 법을 익혔으니, 다음은 그 항목들을 다른 페이지로 연결하고 이미지를 끼워 넣는 법으로 들어갑니다.

더 알아보기#