개념

• 순서가 없는 목록을 나타내는 블록 레벨 요소이다.

특징

• 자식으로 <li>만 포함한다.
• 불릿 모양은 list-style 속성으로 변경 가능하다.
• <li> 안에 또 다른 ul/ol을 넣어 계층적 목록 구성이 가능하다.

실무

내비게이션 메뉴

• nav > ul > li > a 구조

카드형 레이아웃

• ul을 목록 컨테이너로 두고 li를 flex/grid 아이템으로 배치해 카드형 레이아웃 구성

예시

<ul>
  <li>사과</li>
  <li>바나나</li>
  <li>체리</li>
</ul>

<nav aria-label="주요 메뉴">
  <ul>
    <li><a href="/products">제품</a></li>
    <li><a href="/pricing">가격</a></li>
    <li><a href="/docs">문서</a></li>
  </ul>
</nav>