<ul>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

HTML <ul> 요소는 정렬되지 않은 목록을 나타냅니다. 보통 불릿으로 표현합니다.

시도해보기

콘텐츠 카테고리 플로우 콘텐츠. 또한, 최소 하나의 <li> 요소를 자식으로 둔다면 뚜렷한 콘텐츠.
가능한 콘텐츠 0개 이상의 <li>, <script>, <template> 요소.
태그 생략 불가능, 시작과 끝에 태그를 추가하는 것은 필수입니다.
가능한 부모 요소 플로우 콘텐츠를 허용하는 모든 요소.
가능한 ARIA 역할 directory, group, listbox, menu, menubar, radiogroup, tablist, toolbar, tree, presentation
DOM 인터페이스 HTMLUListElement

특성

이 요소는 전역 특성만 포함합니다.

compact

This Boolean attribute hints that the list should be rendered in a compact style. The interpretation of this attribute depends on the user agent, and it doesn't work in all browsers.

경고 : Do not use this attribute, as it has been deprecated: use CSS instead. To give a similar effect as the compact attribute, the CSS property line-height can be used with a value of 80%.

type

This attribute sets the bullet style for the list. The values defined under HTML3.2 and the transitional version of HTML 4.0/4.01 are:

circle disc square

A fourth bullet type has been defined in the WebTV interface, but not all browsers support it: <code>triangle`.

If not present and if no CSS list-style-type property applies to the element, the user agent selects a bullet type depending on the nesting level of the list.

경고 : Do not use this attribute, as it has been deprecated; use the CSS list-style-type property instead.

사용 일람

보통 비정렬 목록의 항목은 선행하는 불릿 마커와 함께 표시합니다.

<ul>과 <ol>은 필요한 만큼 중첩할 수 있고, 서로 교차할 수도 있습니다.

<ul>과 <ol>은 모두 목록을 나타냅니다. 차이가 있다면 <ul>에서는 순서가 중요하지 않다는 점입니다. 항목의 순서를 바꿨을 때 의미도 바뀐다면 <ol>을 사용하세요. 그렇지 않으면 <ul>을 사용할 수 있습니다.

예제

간단한 예제

html
<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

중첩 목록

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ul>
      <li>second item first subitem</li>
      <li>
        second item second subitem
        <!-- Same for the second nested unordered list! -->
        <ul>
          <li>second item second subitem first sub-subitem</li>
          <li>second item second subitem second sub-subitem</li>
          <li>second item second subitem third sub-subitem</li>
        </ul>
      </li>
      <!-- Closing </li> tag for the li that
                  contains the third unordered list -->
      <li>second item third subitem</li>
    </ul>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

비정렬 목록 안의 정렬 목록

html
<ul>
  <li>first item</li>
  <li>
    second item
    <!-- Look, the closing </li> tag is not placed here! -->
    <ol>
      <li>second item first subitem</li>
      <li>second item second subitem</li>
      <li>second item third subitem</li>
    </ol>
    <!-- Here is the closing </li> tag -->
  </li>
  <li>third item</li>
</ul>

명세

Specification
HTML Standard
# the-ul-element

브라우저 호환성

BCD tables only load in the browser

같이 보기

  • 리스트 관련 다른 요소: <ol>, <li>, <menu>

  • <ol> 요소와 유용하게 사용할 수 있는 CSS 속성

    • 서수를 표현할 방식을 지정하는 list-style 속성.
    • 복잡한 중첩 목록을 처리하기 위한 CSS 카운터
    • 더 이상 사용하지 않는 compact 특성을 대체할 수 있는 line-height
    • 항목의 들여쓰기를 조정하기 위한 margin 속성.