설명
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.
참고
- 원본 - https://developer.mozilla.org/en/HTML/Element/ul
-
Other list-related HTML Elements:
<ol>
,<li>
,<menu>
and the obsolete<dir>
;
(ol, li, dir, menu 페이지 생기면 그곳으로 링크 걸어야 하나?) -
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.