<ul>

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

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

HTML
<ul>
  <li>Milk</li>
  <li>
    Cheese
    <ul>
      <li>Blue cheese</li>
      <li>Feta</li>
    </ul>
  </li>
</ul>
CSS
li {
  list-style-type: circle;
}

li li {
  list-style-type: square;
}
콘텐츠 카테고리 플로우 콘텐츠. 또한, 최소 하나의 `
  • ` 요소를 자식으로 둔다면 뚜렷한 콘텐츠.
  • 가능한 콘텐츠 0개 이상의 `
  • `, `이 요소는 전역 특성만 포함합니다.
    • 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.

        !WARNING 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:
        circlediscsquare
        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.

        !WARNING 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>
    

    명세

    브라우저 호환성

    같이 보기

    • 리스트 관련 다른 요소: <ol>, <li>, <menu>
    • <ol> 요소와 유용하게 사용할 수 있는 CSS 속성
      • 서수를 표현할 방식을 지정하는 list-style 속성.
      • 복잡한 중첩 목록을 처리하기 위한 CSS 카운터
      • 더 이상 사용하지 않는 compact 특성을 대체할 수 있는 line-height
      • 항목의 들여쓰기를 조정하기 위한 margin 속성.