1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
|
---
title: <li>
slug: Web/HTML/Element/li
tags:
- Element
- HTML
- HTML grouping content
- Reference
translation_of: Web/HTML/Element/li
---
<div>{{HTMLRef}}</div>
<p><span class="seoSummary"><strong>HTML <code><li></code> 요소</strong>는 목록의 항목을 나타냅니다.</span> 반드시 정렬 목록({{htmlelement("ol")}}), 비정렬 목록({{htmlelement("ul")}}, 혹은 메뉴({{htmlelement("menu")}}) 안에 위치해야 합니다. 메뉴와 비정렬 목록에서는 보통 불릿으로 항목을 나타내고, 정렬 목록에서는 숫자나 문자를 사용한 오름차순 카운터로 나타냅니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/li.html", "tabbed-shorter")}}</div>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리">콘텐츠 카테고리</a></th>
<td>없음.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td><a href="/ko/docs/Web/Guide/HTML/컨텐트_카테고리#플로우_콘텐츠">플로우 콘텐츠</a>.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>다른 <code><li></code> 요소 바로 뒤따르거나 자신이 부모의 마지막 자식인 경우 닫는 태그를 생략할 수 있습니다.</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td>{{HTMLElement("ul")}}, {{HTMLElement("ol")}}, {{HTMLElement("menu")}} 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>{{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("presentation")}}, {{ARIARole("radio")}}, {{ARIARole("separator")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLLIElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
<dl>
<dt>{{htmlattrdef("value")}}</dt>
<dd>{{HTMLElement("ol")}} 요소 내부에서 항목의 현재 서수 값을 나타내는 정수. 리스트가 로마 숫자나 문자로 표시되더라도 이 특성에는 숫자만 넣을수 있습니다. <code>value</code>를 지정한 항목을 뒤따르는 다른 항목은 이 값에서부터 번호를 매깁니다. <code>value</code> 속성은 비정렬 목록({{HTMLElement("ul")}})과 메뉴({{HTMLElement("menu")}})에서는 아무 의미가 없습니다.
<div class="note"><strong>참고</strong>: HTML4에서는 <code>value</code>의 사용을 중단했지만 HTML5에서 다시 도입했습니다.</div>
</dd>
<dt>{{htmlattrdef("type")}} {{Deprecated_inline}}</dt>
<dd>넘버링 타입을 나타내는 문자.
<ul>
<li><code>a</code>: 소문자 글자</li>
<li><code>A</code>: 대문자 글자</li>
<li><code>i</code>: 소문자 로마 숫자</li>
<li><code>I</code>: 대문자 문자 숫자</li>
<li><code>1</code>: 숫자</li>
</ul>
부모 {{HTMLElement("ol")}} 요소에서 지정하는 유형을 덮어씁니다.
<div class="note"><strong>참고:</strong> 이 속성은 사용 중단됐습니다. 대신 CSS {{cssxref("list-style-type")}} 속성을 사용하세요.</div>
</dd>
</dl>
<h2 id="예제">예제</h2>
<p>더 자세한 예제는 {{htmlelement("ol")}}과 {{htmlelement("ul")}}을 참고하세요.</p>
<h3 id="정렬_목록">정렬 목록</h3>
<pre class="brush: html"><ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
</pre>
<p>{{EmbedLiveSample("정렬_목록")}}</p>
<h3 id="사용자_지정_값을_가진_정렬_목록">사용자 지정 값을 가진 정렬 목록</h3>
<pre class="brush: html"><ol type="I">
<li value="3">third item</li>
<li>fourth item</li>
<li>fifth item</li>
</ol>
</pre>
<p>{{EmbedLiveSample("사용자_지정_값을_가진_정렬_목록")}}</p>
<h3 id="비정렬_목록">비정렬 목록</h3>
<pre class="brush: html"><ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul></pre>
<p>{{EmbedLiveSample("비정렬_목록")}}</p>
<h2 id="Specifications" name="Specifications">명세</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">주석</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('HTML WHATWG', 'grouping-content.html#the-li-element', '<li>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'the-li-element.html#the-li-element', '<li>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'lists.html#h-10.2', '<li>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>The <code>type</code> attribute has been deprecated.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.li")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>리스트 관련 다른 요소: {{HTMLElement("ul")}}, {{HTMLElement("li")}}, {{HTMLElement("menu")}}.</li>
<li><code><li></code> 요소와 유용하게 사용할 수 있는 CSS 속성
<ul>
<li>서수를 표현할 방식을 지정하는 {{cssxref("list-style")}} 속성.</li>
<li>복잡한 중첩 목록을 처리하기 위한 <a href="/ko/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters">CSS 카운터</a></li>
<li>항목의 들여쓰기를 조정하기 위한 {{cssxref("margin")}} 속성.</li>
</ul>
</li>
</ul>
|
