실행 가능한 HTML 문서: 목록 (ul, ol)

Q: HTML에서 글머리 기호 목록은 어떻게 만드나요?

순서 없는 목록을 쓰세요. 안에 항목마다 를 하나씩 넣어요. 예를 들어 Milk Eggs 처럼요. 브라우저가 각 항목 앞에 글머리 기호를 그리고 목록을 들여 써요.

Q: ul과 ol은 무엇이 다른가요?

은 순서 없는 목록으로, 글머리 기호로 표시되고 순서가 중요하지 않은 항목에 써요. 은 순서 있는 목록으로, 번호로 표시되고 순서가 중요한 단계나 순위에 써요. 둘 다 항목을 담아요.

Q: HTML 목록에서 글머리 기호(점)를 없애려면 어떻게 하나요?

CSS에서 에 list-style: none을 주세요. 브라우저가 글머리 기호를 위해 넣는 들여쓰기도 없애려면 padding-inline-start: 0(또는 padding: 0)도 주세요.

Q: 순서 있는 목록을 다른 번호부터 시작하려면 어떻게 하나요?

start 속성을 쓰세요. 는 첫 항목을 5번으로 매겨요. reversed는 거꾸로 세고, 의 value는 그 항목과 뒤따르는 항목들의 번호를 정해요.

Q: HTML에서 중첩 목록은 어떻게 만드나요?

안쪽 이나 을 바깥 목록의 안, 그 항목의 텍스트 뒤에 넣으세요. 다른 안에서 요소들 사이에 바로 넣은 목록은 올바르지 않아요.

HTML 목록: ul, ol, li

HTML의 주요 목록은 두 가지예요. <ul>(순서 없는 목록)은 글머리 기호를, <ol>(순서 있는 목록)은 번호를 보여 줘요. 각 항목은 <li>(목록 항목)예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Lists</title>
</head>
<body>
  <h3>Shopping</h3>
  <ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Bread</li>
  </ul>

  <h3>Recipe</h3>
  <ol>
    <li>Whisk the eggs</li>
    <li>Heat the pan</li>
    <li>Cook for two minutes</li>
  </ol>
</body>
</html>

순서에 의미가 있으면(단계, 순위, 목차) <ol>을, 없으면 <ul>을 쓰세요. 스크린 리더는 둘 다 "목록, 항목 3개"처럼 개수와 함께 목록이라고 알려 줘요. 그래서 "•"나 "1."을 직접 입력한 줄보다 진짜 목록이 나아요.

목록은 <li> 요소만 직접 담을 수 있어요. 제목, 문단, 다른 목록을 포함한 그 밖의 모든 것은 <li> 안에 넣어요.

글머리 기호 스타일

<ul>의 list-style-type은 글머리 기호를 바꿔요. ::marker 가상 요소는 텍스트와 별도로 글머리 기호나 번호 자체를 꾸며요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Bullet styles</title>
  <style>
    .disc { list-style-type: disc; }
    .circle { list-style-type: circle; }
    .square { list-style-type: square; }
    .custom { list-style-type: "\2713  "; }
    .colored li::marker { color: #2563eb; font-size: 1.3em; }
  </style>
</head>
<body>
  <ul class="disc"><li>disc (the default)</li></ul>
  <ul class="circle"><li>circle</li></ul>
  <ul class="square"><li>square</li></ul>
  <ul class="custom"><li>any text as the bullet</li></ul>
  <ul class="colored"><li>blue, larger marker</li><li>text stays the same</li></ul>
</body>
</html>

문자열 값을 주면 그 텍스트가 글머리 기호가 돼요. "\2713 "은 체크 표시 뒤에 공백 한 칸이에요. 첫 번째 공백은 \2713 이스케이프를 끝내는 역할만 해요. ::marker는 주로 color, font-size 등 글꼴 관련 속성 몇 가지만 받지만, 마크업 추가 없이 "색 있는 글머리 기호"를 만드는 흔한 요구는 충분히 해결돼요.

순서 있는 목록: 숫자, 알파벳, 로마 숫자

<ol>에는 번호 매기기용 속성이 있어요.

속성	예	결과
`type`	`type="a"`	a, b, c(`A`, `i`, `I`, `1`도 가능)
`start`	`start="5"`	5부터 셈
`reversed`	`reversed`	거꾸로 셈
`value`(`<li>`에)	`<li value="10">`	이 항목은 10이고, 다음 항목은 거기서 이어짐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ordered lists</title>
  <style>
    body { display: flex; flex-wrap: wrap; gap: 24px; font-family: system-ui, sans-serif; }
  </style>
</head>
<body>
  <ol type="A">
    <li>Option A</li>
    <li>Option B</li>
  </ol>

  <ol type="i">
    <li>Preface</li>
    <li>Contents</li>
  </ol>

  <ol start="4">
    <li>Fourth step</li>
    <li>Fifth step</li>
  </ol>

  <ol reversed>
    <li>Bronze</li>
    <li>Silver</li>
    <li>Gold</li>
  </ol>
</body>
</html>

알파벳이 의미를 가질 수 있기 때문에("B번을 고르세요") type은 HTML에 써도 괜찮아요. 순전히 시각적인 변경이라면 CSS의 list-style-type: upper-alpha나 lower-roman이 같은 일을 해요.

중첩 목록

하위 목록은 그것이 속한 <li> 안, 그 항목의 텍스트 뒤에 넣어요. 브라우저는 단계마다 글머리 기호를 바꿔요. 채운 원, 빈 원, 사각형 순서예요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Nested list</title>
</head>
<body>
  <ul>
    <li>Frontend
      <ul>
        <li>HTML</li>
        <li>CSS
          <ul>
            <li>Flexbox</li>
            <li>Grid</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>Backend</li>
  </ul>
</body>
</html>

</li>의 위치를 보세요. "Frontend" 항목은 하위 목록이 끝난 뒤에야 닫혀요. <ul> 앞에서 닫으면 하위 목록이 바깥 <ul> 안에 바로 들어가게 되는데, 거의 똑같아 보여도 올바르지 않아요.

순서 있는 목록도 같은 방식으로 중첩하고, 하위 목록마다 번호가 1부터 다시 시작해요. 1.1, 1.2 같은 번호에는 CSS 카운터가 필요해요.

설명 목록: dl, dt, dd

설명 목록은 용어와 설명을 짝지어요. 용어집, 주문 상세 정보, FAQ 같은 짝이에요. <dt>가 용어이고 <dd>가 설명이에요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Description list</title>
  <style>
    dt { font-weight: bold; }
    dd { margin: 0 0 10px; color: #4b5563; }
  </style>
</head>
<body>
  <dl>
    <dt>HTML</dt>
    <dd>The structure and content of a page.</dd>
    <dt>CSS</dt>
    <dd>How the page looks.</dd>
    <dt>JavaScript</dt>
    <dd>What the page does.</dd>
  </dl>
</body>
</html>

용어 하나에 <dd>가 여러 개일 수 있고, 여러 <dt>가 <dd> 하나를 공유할 수도 있어요. 브라우저는 기본적으로 <dd>를 들여 쓰는데, 위의 margin 규칙이 그걸 없애요. 열이 여러 개인 데이터에는 표가 더 맞아요.

글머리 기호 없는 목록: 메뉴와 가로 목록

내비게이션 메뉴는 링크 목록이에요. list-style: none으로 글머리 기호를, padding: 0으로 들여쓰기를 없애고, flexbox로 항목을 한 줄로 배치하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Horizontal list</title>
  <style>
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      gap: 8px;
    }
    nav a {
      display: block;
      padding: 8px 14px;
      border-radius: 6px;
      background: #e5e7eb;
      color: #111827;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#courses">Courses</a></li>
      <li><a href="#pricing">Pricing</a></li>
    </ul>
  </nav>
</body>
</html>

스크린 리더에게는 여전히 목록이에요("내비게이션, 목록, 항목 3개"). 예외가 하나 있어요. VoiceOver를 쓰는 Safari는 글머리 기호를 없애면 목록이라는 의미를 버릴 수 있어요. 사용자에게 개수가 중요하다면 <ul>에 role="list"를 추가하세요.

기본 간격

브라우저는 목록에 위아래 margin 1em을 주고, 글머리 기호가 놓이는 자리인 padding-inline-start: 40px로 들여 써요. padding이 시작 쪽에 있어서, 오른쪽에서 왼쪽으로 쓰는 언어에서는 글머리 기호와 들여쓰기가 자동으로 반대쪽으로 가요. padding을 없애면 글머리 기호가 목록 상자 밖으로 나가서 잘릴 수 있어요. padding을 조금 남기거나 list-style-position: inside를 쓰세요.

자주 하는 실수

부모 목록 없이 <li>를 씀. <ul>, <ol>, <menu> 안에 있어야 해요.
중첩 목록을 <li> 밖에 둠. 하위 목록은 그것이 속한 항목 안에 넣으세요.
<ul> 안에 텍스트나 다른 태그를 바로 넣음. <ul><p>Note</p><li>...</li></ul> 같은 경우예요. <li> 안으로 옮기거나 목록 밖으로 빼세요.
글머리 기호나 번호를 손으로 입력함. •와 <br>로 만들면 스크린 리더는 목록이 아니라 문단으로 들어요.
padding: 0 없이 list-style: none만 씀. 정체 모를 40픽셀 들여쓰기가 남아요.
모양 때문에 <ol>을 씀. 순서가 중요하지 않다면 <ul>을 쓰고 꾸미세요.

자주 묻는 질문

HTML에서 글머리 기호 목록은 어떻게 만드나요?

순서 없는 목록을 쓰세요. <ul> 안에 항목마다 <li>를 하나씩 넣어요. 예를 들어 <ul><li>Milk</li><li>Eggs</li></ul>처럼요. 브라우저가 각 항목 앞에 글머리 기호를 그리고 목록을 들여 써요.

ul과 ol은 무엇이 다른가요?

<ul>은 순서 없는 목록으로, 글머리 기호로 표시되고 순서가 중요하지 않은 항목에 써요. <ol>은 순서 있는 목록으로, 번호로 표시되고 순서가 중요한 단계나 순위에 써요. 둘 다 <li> 항목을 담아요.

HTML 목록에서 글머리 기호(점)를 없애려면 어떻게 하나요?

CSS에서 <ul>에 list-style: none을 주세요. 브라우저가 글머리 기호를 위해 넣는 들여쓰기도 없애려면 padding-inline-start: 0(또는 padding: 0)도 주세요.

순서 있는 목록을 다른 번호부터 시작하려면 어떻게 하나요?

start 속성을 쓰세요. <ol start="5">는 첫 항목을 5번으로 매겨요. reversed는 거꾸로 세고, <li>의 value는 그 항목과 뒤따르는 항목들의 번호를 정해요.

HTML에서 중첩 목록은 어떻게 만드나요?

안쪽 <ul>이나 <ol>을 바깥 목록의 <li> 안, 그 항목의 텍스트 뒤에 넣으세요. 다른 <ul> 안에서 <li> 요소들 사이에 바로 넣은 목록은 올바르지 않아요.

HTML 목록(리스트): ul, ol, li와 중첩 목록