[HTML] 목록 태그

1. 목록 태그란?

HTML에서 여러 항목을 나열할 때 쓰는 태그.

목록도 단순히 나열하는 것이 아닌 순서가 있냐, 없냐에 따라 다른 태그를 써야함.

순서 없는 목록 → <ul> (unordered list)
순서 있는 목록 → <ol> (ordered list)
항목 하나하나는 <li> (list item)로 작성

목록 태그는 문서 구조를 깔끔하게 만듦.

2. 순서 없는 목록

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

결과 :

• 사과
• 바나나
• 포도

- 항목 앞에 동그라미(●) 같은 기호가 붙음
- 쇼핑 목록, 메뉴, 기능 나열 등 순서가 중요하지 않은 경우에 사용
- CSS 속성으로 기호 모양 변경 가능

3. 순서 있는 목록

<ol>
  <li>빨래하기</li>
  <li>청소하기</li>
  <li>요리하기</li>
</ol>

결과 :

1. 빨래하기
2. 청소하기
3. 요리하기

- 항목 앞에 자동으로 번호가 붙음
- 순서, 순위, 단계 등 순서가 중요한 경우에 사용
- type 속성으로 번호 스타일 변경 가능

4. 목록 항목 태그

<li>고양이</li>

결과 :

고양이

- ul 또는 ol 안에서 사용
- 목록의 개별 항목을 의미
- 안에 다른 태그 (이미지, 링크, 문단 등)도 넣을 수 있음

5. 중첩 목록

<ul>
  <li>Frontend
    <ul>
      <li>HTML</li>
      <li>CSS</li>
    </ul>
  </li>
  <li>Backend</li>
</ul>

결과 :

• Frontend
  • HTML
  • CSS
• Backend

- 목록 안에 다른 목록을 넣는 구조 - 계층 구조 표현에 유용

6. 주의할 점

줄바꿈만 하고 싶어서 <br> 대신 <li> 쓰면 안 됨 ❌
<li>는 반드시 <ul> 또는 <ol> 안에서 사용해야 함
스타일링 목적으로 목록 태그 남발하지 말고, 의미에 맞게 사용

7. 정리

<ul> : 순서 없는 목록
<ol> : 순서 있는 목록
<li> : 목록 항목
중첩 목록 가능
CSS로 기호·번호 스타일 변경 가능