HTML 강좌 / 목록 - ol, ul, dl, 중첩 목록

HTML 목록은 순서가 중요하면 ol, 순서가 중요하지 않으면 ul, 이름과 설명의 관계를 나타내면 dl로 작성합니다. 번호나 글머리표의 모양이 아니라 항목 사이의 의미를 기준으로 요소를 선택하세요.

ol, ul, dl 중 무엇을 사용할까?

ol과 ul 안의 항목은 각각 li로 만듭니다. dl은 이름을 dt, 그에 대한 설명이나 값을 dd로 적습니다.

세 가지 목록을 한 문서에서 확인하기

다음 코드를 HTML 파일로 저장해 열면 글머리표 목록, 번호 목록, 설명 목록의 기본 표시를 비교할 수 있습니다. 예제의 글꼴은 화면 결과를 일정하게 보여 주기 위해 CSS로 지정했습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML 목록</title>
    <style>
      body { font-family: "Noto Sans KR", sans-serif; }
    </style>
  </head>
  <body>
    <h1>여행 준비</h1>
    <h2>준비물</h2>
    <ul>
      <li>물</li>
      <li>지도</li>
    </ul>
    <h2>진행 순서</h2>
    <ol>
      <li>일정 정하기</li>
      <li>가방 싸기</li>
    </ol>
    <h2>용어</h2>
    <dl>
      <dt>출발일</dt>
      <dd>여행을 시작하는 날</dd>
      <dt>도착일</dt>
      <dd>목적지에 도착하는 날</dd>
    </dl>
  </body>
</html>

브라우저의 기본 들여쓰기와 마커 모양은 CSS에 따라 바뀔 수 있습니다. 중요한 차이는 겉모양이 아니라 순서와 이름·설명의 관계가 HTML에 담겨 있다는 점입니다.

ol의 시작 번호와 순서 바꾸기

ol은 기본적으로 1부터 번호가 붙습니다. start는 시작 번호를 정하고, 특정 li의 value는 그 항목의 번호를 바꿉니다.

<ol start="5">
  <li>다섯 번째 단계</li>
  <li value="9">아홉 번째 단계</li>
  <li>열 번째 단계</li>
</ol>

위 목록은 5, 9, 10으로 표시됩니다. 순서를 거꾸로 세어야 한다면 reversed 속성을 사용할 수 있습니다.

<ol reversed>
  <li>세 번째 항목</li>
  <li>두 번째 항목</li>
  <li>첫 번째 항목</li>
</ol>

번호를 변경하는 속성은 실제 순서가 뜻을 가질 때 사용합니다. 단순히 특정 모양의 숫자 마커가 필요하다는 이유로 순서 없는 항목을 ol로 바꾸지 않습니다.

dl로 이름과 설명 연결하기

dl은 용어 사전에만 쓰이는 요소가 아닙니다. 상품의 이름과 값, 일정의 날짜와 설명처럼 서로 대응하는 정보를 표현할 수도 있습니다. 하나의 dt에 여러 dd를 이어 쓸 수 있지만, 독자가 어떤 설명이 어느 이름에 속하는지 알 수 있게 구성해야 합니다.

<dl>
  <dt>운영 시간</dt>
  <dd>평일 오전 9시부터 오후 6시까지</dd>
  <dt>휴무일</dt>
  <dd>토요일과 일요일</dd>
</dl>

실제 운영 정보를 보여 주는 예제가 아니라 dt와 dd의 관계를 보여 주는 가상의 내용입니다.

목록 안에 목록 넣기

하위 목록은 관련된 상위 li의 안쪽에 넣습니다. 다음 예제에서 ‘옷’ 아래의 두 항목은 여행 준비물 중에서도 옷의 종류입니다.

<ul>
  <li>물</li>
  <li>옷
    <ul>
      <li>겉옷</li>
      <li>양말</li>
    </ul>
  </li>
</ul>

ol과 ul도 섞어서 중첩할 수 있습니다. 아래 예제에서는 전체 작업 단계의 순서는 중요하지만, ‘짐 싸기’에 필요한 두 준비물의 순서는 중요하지 않습니다.

<ol>
  <li>여행 날짜 정하기</li>
  <li>짐 싸기
    <ul>
      <li>옷 챙기기</li>
      <li>세면도구 챙기기</li>
    </ul>
  </li>
  <li>출발하기</li>
</ol>

하위 목록을 상위 ul이나 ol의 직접 자식으로 두지 말고, 관련된 li 안에 넣습니다. 목록을 문단인 p 안에 넣는 것도 피해야 합니다. 목록과 문단은 별도의 구조입니다.

목록 작성 시 확인할 점

• 순서가 의미를 바꾸는지 먼저 판단한 뒤 ol 또는 ul을 선택합니다.
• ol과 ul의 각 항목은 li로 작성합니다.
• dl의 dt와 dd가 어떤 관계인지 독자가 알 수 있게 씁니다.
• 하위 목록은 부모 li 안에 넣고, 마커의 모양과 간격은 CSS로 조절합니다.

더 자세한 목록 구조와 중첩 예제는 MDN의 HTML 목록 안내에서 확인할 수 있습니다.