html/css 독학하기

코스 전체목록

닫기

ul

설명

The HTML unordered list element (<ul>) represents an unordered list of items, namely a collection of items that do not have a numerical ordering, and their order in the list is meaningless. Typically, unordered-list items are displayed with a bullet, which can be of several forms, like a dot, a circle or a squared. 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>(OT에 페이지 생기면 링크 걸어야~) elements.

Usage note: The <ol> and <ul> both represent a list of items. They differ in the way that, with the <ol> element, the order is meaningful. As a rule of thumb to determine which one to use, try changing the order of the list items; if the meaning is changed, the <ol> element should be used, else the <ul> is adequate.

Usage Context

Content categories (링크 어디로 걸어야?) flowing content
Permitted content zero or more <li> elements, eventually mixed with <ol> and <ul> elements. (li, ol, ul 페이지 생기면
링크걸어야>
Tag omission none, both the start tag and the end tag are mandatory
Permitted parent elements any element that accept flowing content.
Normative document HTML5, section 4.5.6 (HTML4.01, section 10.2)

속성

다른 모든 HTML 엘리먼트와 마찬가지로, 이 엘리먼트는 전역속성을 지원한다.

compact (Deprecated)

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 <ol> element should be styled using CSS. To give a similar effect than the compact attribute, the CSS property line-height can be used with a value of 80%.

type (Deprecated)

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.

예제

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

Above HTML will output:

  •     first item
  •     second item
  •     third item

예제 - Nested <ul> and <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> 

Above HTML will output:

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

DOM Interface

This element implements the HTMLUListElement interface.

참고

댓글

댓글 본문
graphittie 자세히 보기