[HTML] 06. 목록(List) 태그 완전 정리 (ul, ol, li)

[HTML] 06. 목록(List) 태그 완전 정리 (ul, ol, li)

목록(List)은 웹페이지에서 매우 자주 사용됩니다.
메뉴, 게시글 목록, 댓글 목록, 카테고리, 네비게이션 등 거의 모든 구조가 목록 형태로 만들어집니다.

이번 글에서는 단순 사용법이 아니라 목록의 의미와 구조를 이해해보겠습니다.

---

1. 순서 없는 목록 (ul)

ul은 unordered list의 약자입니다.
순서가 중요하지 않은 목록을 만들 때 사용합니다.

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

Output

• 사과
• 바나나
• 포도

기본적으로 ● 점이 붙습니다.

---

2. 순서 있는 목록 (ol)

ol은 ordered list입니다.
순서가 중요한 목록에 사용합니다.

<ol>
  <li>회원가입</li>
  <li>로그인</li>
  <li>주문하기</li>
</ol>

Output

1. 회원가입
2. 로그인
3. 주문하기

기본적으로 1, 2, 3 숫자가 붙습니다.

---

3. li 태그의 역할

li는 list item입니다.
반드시 ul 또는 ol 안에 들어가야 합니다.

잘못된 예:

<li>잘못된 사용</li>

단독으로 사용할 수 없습니다.

---

4. 중첩 목록 (Nested List)

목록 안에 또 다른 목록을 넣을 수 있습니다.

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

Output

• 과일
  • 사과
  • 바나나

이 구조는 메뉴 만들 때 매우 자주 사용됩니다.

---

5. ol 속성 (start, type)

① 시작 숫자 변경

<ol start="5">
  <li>항목</li>
</ol>

② 타입 변경

<ol type="A">
  <li>항목</li>
</ol>

• 1 → 숫자
• A → 대문자
• a → 소문자
• I → 로마 숫자

---

6. 실무에서 목록이 중요한 이유

• 네비게이션 메뉴는 대부분 ul로 구성
• 게시판 리스트도 ul로 구성 가능
• 카테고리 구조 표현
• 접근성 측면에서 의미 있는 구조

HTML은 단순히 디자인이 아니라 의미 있는 구조를 만드는 언어입니다.

---

7. 핵심 정리

• ul → 순서 없는 목록
• ol → 순서 있는 목록
• li → 목록 항목
• 목록은 중첩 가능
• 메뉴 구조의 기본은 ul이다

목록을 이해하면, 이제 웹사이트 구조를 직접 만들 수 있는 단계에 도달한 것입니다.