li - html/css 독학하기

설명

The HTML List item element (<li>) is used to represent a list item. It should be contained in an ordered list (<ol>), an unordered list (<ul>) or a menu (<menu>), where it represents a single entity in that list. In menus and unordered lists, list items are ordinarily displayed using bullet points. In order lists, they are usually displayed with some ascending counter on the left such as a number or letter

HTML에서 <li>라는 요소는 목록을 표현하기 위해 사용된다. 일반적으로 순서가 있는 목록과 순서가 없는 목록으로 나뉘는데 순서가 있는 목록은 <ol>로, 순서가 없는 목록은 <ul> 또는 <menu>로 표현한다. <menu>와 <ul>은 겉으로는 다른 점이 전혀 없다. 다만 특별히 메뉴라고 나타내고 싶은 목록의 경우 일반적인 목록들과 구분해주고 싶을 때 사용한다. <menu> 목록의 특징으로는 보통 다른 페이지로 이동할 수 있도록 링크<a>가 걸리는 등, 사용자가 어떤 액션을 취했을 때 이에 따른 반응한다는 특징이 있다. 이것으로 메뉴 목록과 일반 목록을 구분할 수 있다.

순서가 없는 목록(<ul>, <menu>)을 작성 후 브라우저에서 확인해 보면 각 항목이 블릿과 함께 표시되는 것을 볼 수 있다. (블릿이란 각각의 항목을 구분해 주기 위해 사용되는 작은 네모나 원 형태 등의 도형들을 말한다.) 순서가 있는 목록은 숫자(1, 2, 3...)나 알파벳(a, b, c..)과 같은 문자를 이용해서 위에서부터 아래로 항목 왼쪽에 자동으로 순서가 표시된다.

Usage Context

Permitted content	Flow content
Tag omission	The end tag can be omitted if it is immediately followed by another `<li>` element or if there is no more content in its parent element.
Permitted parent elements	an `<ul>`, `<ol>` or `<menu>` element. Though not a non-conforming usage, the obsolete `<dir>` may also be a parent.
Normative document	HTML5, section 4.5.7 (HTML4.01, section 10.2)

속성

이 엘리먼트는 전역속성을 지원한다.

value

This integer attributes indicates the current ordinal value of the item in the list as defined by the <ol> element. The only allowed value for this attribute is a number, even if the list is displayed with Roman numerals or letters. List items that follow this one continue numbering from the value set. The value attribute has no meaning for unordered lists ( <ul>) or for menus ( <menu>).

값

<ol>의 각 항목 앞에 표시되는 숫자 값들은 현재 자신의 순서를 뜻한다고 볼 수 있다. 이 값들은 I, II, V, X.. 와 같은 로마 숫자가 되었든 A, B, C 등의 문자가 되었든 결과적으로 오직 순서의 의미로써만 사용된다. 그리고 <ol> 목록이 가진 항목이 늘어날수록 자동으로 다음 숫자 값을 매기게 되어있다. 당연하겠지만 이 숫자 값은 순서가 없는 목록 즉, <ul> 과 <menu>에서는 큰 의미가 없다.

참고 : This attribute was deprecated in HTML4, but reintroduced in HTML5.
참고 : 이 속성은 HTML4에서는 폐지 되었으나, HTML5에 와서 다시 도입되었다.

Gecko 9.0 note :
(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)
Prior to Gecko 9.0 negative values were incorrectly converted to 0. From Gecko 9.0 all integer values are used correctly.

Gecko 9.0 참고 :
(Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6)
Gecko 9.0 이전 버전에서는 마이너스 값의 경우 0으로 바뀌어 버렸다. Gecko 9.0 버전부터는 모든 정수값은 정확하게 사용된다.

type - Deprecated

This character attributes indicates the numbering type: •a: lowercase letters
•A: uppercase letters
•i: lowercase Roman numerals
•I: uppercase Roman numerals
•1: numbers
This type overrides the one used by its parent <ol> element, if any.

type 속성 - 폐지됨

type 속성은 문자이며, 아래와 같이 순서를 매기는 형식을 나타낸다.

•a: 소문자 형식
•A: 대문자 형식
•i: 로마자의 소문자 형식
•I: 로마자의 대문자 형식
•1: 숫자값 형식

참고 : This attribute has been deprecated: use the CSS list-style-type property instead.
참과 : 이 속성은 폐지 되었지만 대신 CSS의 list-style-type 이란 속성을 사용해서 표현 할 수 있다.

예제

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

The above HTML will output:
1.first item
2.second item
3.third item

<ol>
    <li>첫번째 항목</li>
    <li>두번째 항목</li>
    <li>세번째 항목</li>
</ol>

출력화면

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

•first item
•second item
•third item

For more detailed examples, see the <ol> and <ul> pages.

<ul>
    <li>첫번째 항목</li>
    <li>두번째 항목</li>
    <li>세번째 항목</li>
</ul>

더 자세한 예제를 보고 싶다면 <ol> 과 <ul> 페이지를 참고하면 된다.

DOM Interface

This element implements the HTMLLIElement interface.

호환성

Desktop
기능	구글크롬	파이어폭스Gecko)	인터넷 익스플로러	Opera	Safari
기본적인 지원	지원	지원	지원	지원	지원

Mobile
기능	안드로이드	파이어폭스 모바일(Gecko)	인터넷 익스플로러 모바일	오페라 모바일	사파리 모바일
기본적인 지원

참고

https://developer.mozilla.org/en/HTML/Element/li
Other list-related HTML Elements: <ul>, <li>, <menu> and the obsolete <dir>;
CSS properties that may be specially useful to style the <li> element:
- the list-style property, to choose the way the ordinal is displayed,
- CSS counters, to handle complex nested lists,
- the margin property, to control the indent of the list item.

코스 전체목록

li

설명