목록 — ul, ol, li

메뉴, 순서 있는 단계, 항목 나열. 웹 페이지에서 목록은 생각보다 훨씬 자주 등장한다. 네비게이션 바도 사실 <ul> 목록을 CSS로 가로로 펼쳐놓은 것이다.

---

순서 없는 목록 — ul

<ul>(Unordered List)은 순서가 중요하지 않은 항목들을 나열할 때 쓴다. 기본적으로 각 항목 앞에 점(•)이 붙는다.

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

결과:

• 사과
• 바나나
• 딸기

---

순서 있는 목록 — ol

<ol>(Ordered List)은 순서가 의미를 갖는 항목들에 쓴다. 기본적으로 숫자가 붙는다.

<ol>
  <li>물을 끓인다</li>
  <li>면을 넣는다</li>
  <li>스프를 넣는다</li>
  <li>3분 기다린다</li>
</ol>

결과:
1. 물을 끓인다
2. 면을 넣는다
3. 스프를 넣는다
4. 3분 기다린다

ol 속성

<!-- 시작 번호 변경 -->
<ol start="3">
  <li>세 번째부터 시작</li>
  <li>네 번째</li>
</ol>

<!-- 역순 -->
<ol reversed>
  <li>3등</li>
  <li>2등</li>
  <li>1등</li>
</ol>

<!-- 알파벳으로 표시 -->
<ol type="a">
  <li>항목 a</li>
  <li>항목 b</li>
</ol>

---

목록 항목 — li

<li>(List Item)는 <ul> 또는 <ol> 안에서만 쓴다. 단독으로 쓰는 건 올바른 HTML이 아니다.

<!-- 올바른 사용 -->
<ul>
  <li>항목</li>
</ul>

<!-- 잘못된 사용 -->
<li>단독으로 쓴 li</li>

---

중첩 목록

목록 안에 목록을 넣을 수 있다. <li> 안에 새로운 <ul> 또는 <ol>을 넣으면 된다.

<ul>
  <li>프론트엔드
    <ul>
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>
  </li>
  <li>백엔드
    <ul>
      <li>Java</li>
      <li>Python</li>
    </ul>
  </li>
</ul>

---

정의 목록 — dl, dt, dd

용어와 그 설명을 짝으로 나타낼 때 쓰는 목록이다. 자주 쓰이진 않지만 용어 사전, FAQ 같은 구조에 적합하다.

<dl>
  <dt>HTML</dt>
  <dd>웹 페이지의 구조를 정의하는 마크업 언어</dd>

  <dt>CSS</dt>
  <dd>웹 페이지의 스타일을 지정하는 언어</dd>
</dl>

• <dl> — Definition List
• <dt> — Definition Term (용어)
• <dd> — Definition Description (설명)

---

목록 태그를 고를 때 기준은 단순하다. 순서가 바뀌면 의미가 달라지면 <ol>, 순서가 상관없으면 <ul>. 이 기준 하나만 기억하면 된다.