HTML <ul>: 비정렬 목록 요소

HTML <ul>: 비정렬 목록 요소

HTML <ul> 요소는 정렬하지 않은 목록을 나타냅니다. 주로 구분점을 사용해 항목을 표현합니다.

<p>태양계의 외행성:</p>
<ul>
  <li>천왕성</li>
  <li>토성</li>
  <li>목성</li>
  <li>해왕성</li>
</ul>

불러오는 중...

특성

전역 특성만 포함합니다.

사용 일람

  • <ul> 요소는 순서가 무의미한 다수의 항목을 묶을 때 사용합니다. 대개 각각의 항목은 구분점을 사용해 나타내며, 점, 원, 사각형 등 다양한 형태를 취할 수 있습니다. 구분점의 형태는 HTML에서 정의하지 않고 CSS의 list-style-type에서 결정합니다.

  • <ol><ul>은 필요한 만큼 중첩할 수 있으며, 서로 혼합해서 중첩하는 것도 가능합니다.

  • <ol><ul>은 둘 다 목록을 나타냅니다. 차이점은 <ol>에선 항목의 순서가 중요하다는 것입니다. 다음과 같은 목록에서는 순서가 중요합니다.

    • 레시피의 단계
    • 길 찾는 법
    • 함유량을 내림차순으로 정렬한 영양성분 목록

    어떤 목록을 사용해야 하는지 모르겠다면 항목의 순서를 섞어보세요. 의미가 달라지면 <ol>을 사용해야 하고, 달라지지 않으면 <ul>을 사용해도 됩니다.

예제

중첩 목록

<ul>
  <li></li>
  <li>

    <!-- 닫는 </li> 태그를 여기 두지 않아요! -->
    <ul>
      <li>나-1</li>
      <li>나-2</li>
      <li>나-3</li>
    </ul>
    <!-- 여기서 닫아줘요 -->
  </li>
  <li></li>
</ul>

명세

HTML Standard

브라우저 호환성

MDN browser-compat-data
데스크톱모바일
iOSAndroid
SafariChromeFirefoxSafariChromeFirefoxSamsung Internet
ul
compact
type

같이 보기

  • 목록 항목: <li>
  • 정렬 목록: <ol>