<ul>

개요

HTML unordered list 요소 (<ul>) 는 리스트에서의 순서가 의미없는, 숫자 순서를 가지고 있지 않은, 정렬되지 않은 항목들의 리스트를 나타냅니다. 일반적으로, 정렬되지않은 리스트의 항목들은 굵은 점과 함께 표시됩니다. The bullet style is not defined in the HTML description of the page, but in its associated CSS, using the list-style-type property.

There is no limitation to the depth and imbrication of lists defined with the <ol> and <ul> elements.

사용 문맥

속성

이 요소는  전역 속성을 포함합니다.

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.

Usage note: Do not use this attribute, as it has been deprecated: the <ul> element should be styled using CSS. To give a similar effect as the compact attribute, the CSS property line-height can be used with a value of 80%.

type

Used to set 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,
• and square.

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

If not present and if no CSS list-style-type property does apply to the element, the user agent decide to use a kind of bullets depending on the nesting level of the list.

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

DOM 인터페이스

이 요소는 HTMLUListElement 인터페이스를 구현합니다.

예제

간단한 예제

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

위 HTML의 결과:

• first item
• second item
• third item

중첩된 리스트

<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>
  </li>               <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

위 HTML의 결과:

• first item
• second item
  • second item first subitem
  • second item second subitem
    • second item second subitem first sub-subitem
    • second item second subitem second sub-subitem
    • second item second subitem third sub-subitem
  • second item third subitem
• third item

중첩된 <ul>와 <ol>

<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>
  </li>                <!-- Here is the closing </li> tag -->
  <li>third item</li>
</ul>

위 HTML의 결과:

• first item
• second item
  1. second item first subitem
  2. second item second subitem
  3. second item third subitem
• third item

같이 보기

• 다른 리스트 관련 요소들: <ol>, <li>, <menu>, 그리고 폐기된 <dir>;
• CSS properties that may be specially useful to style the <ul> element:
  • the list-style property, useful to choose the way the ordinal is displayed,
  • CSS counters, useful to handle complex nested lists,
  • the line-height property, useful to simulate the deprecated compact attribute,
  • the margin property, useful to control the indent of the list.