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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
title: <label>
slug: Web/HTML/Element/label
tags:
- Element
- HTML
- HTML forms
- Reference
- Web
translation_of: Web/HTML/Element/label
---
<div>{{HTMLRef}}</div>
<p><strong>HTML <code><label></code> 요소</strong>는 사용자 인터페이스 항목의 설명을 나타냅니다.</p>
<div>{{EmbedInteractiveExample("pages/tabbed/label.html", "tabbed-shorter")}}</div>
<div 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.</div>
<p><code><label></code> 을 {{htmlelement("input")}} 요소와 연결하면 몇 가지 이점이 있습니다:</p>
<ul>
<li>label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다. </li>
<li>관련 label 을 클릭해서 input 자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.</li>
</ul>
<p><code><label></code> 을 <code><input></code> 요소와 연관시키려면, <code><input></code> 에 <code>id</code> 속성을 넣어야합니다. 그런 다음 <code><label></code> 에 <code>id</code> 와 같은 값의 <code>for</code> 속성을 넣어야합니다. </p>
<p>또는, <code><label></code> 안에 <code><input></code> 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 <code>for</code> 및 <code>id</code>속성이 필요없습니다.</p>
<pre class="brush: html"><label>Do you like peas?
<input type="checkbox" name="peas">
</label>
</pre>
<p>다른 사용법 메모:</p>
<ul>
<li>label 이 붙여진 양식 컨트롤(form control) 은 <em>레이블된 제어 labeled control</em> 라고 불립니다. 하나의 input 은 여러 label들에 연관되어있습니다.</li>
<li>연관된 양식 컨트롤(form control) 이 있는 <code><label></code> 이 클릭되거나 터치되면, 이 label의 <code>click</code> 이벤트는 연관된 control 도 동작시킵니다.</li>
</ul>
<h2 id="특성">특성</h2>
<p>이 요소는 <a href="/ko/docs/Web/HTML/Global_attributes">전역 특성</a>을 포함합니다.</p>
<dl>
<dt>{{htmlattrdef("for")}}</dt>
<dd>같은 문서 내의 <code><label></code> 요소로서, <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a>한 form-related 요소의 {{htmlattrxref("id")}}. 레이블 가능한 요소일 때, <code>for</code> 속성값과 일치하는 <code>id</code>를 가진 문서의 첫 번째 요소는 그 label 요소의 <em>라벨 제어(labeled control)</em>라고 합니다. label을 지정할 수 없으면 <code>for</code> 속성은 영향을 미치지 않습니다. 문서의 뒷부분에 <code>id</code> 값과 일치하는 다른 요소들은 무시합니다.
<div class="note"> <code><label></code> 요소는 <code>for</code> 속성과 제어control 요소를 동시에 가질 수 있습니다. 이 때 <code>for</code> 속성은 포함되어있는 제어control 요소를 가리키고 있어야 합니다.</div>
</dd>
<dt>{{htmlattrdef("form")}}</dt>
<dd>label과 연관된 {{htmlelement ( "form")}} 요소(<em>양식 소유자 form owner</em>). 이 속성이 지정된 경우, 이 속성 값은 동일한 문서의 {{HTMLElement ( "form")}} 요소의 id입니다. 따라서 label 요소를 양식 요소의 자손이 아닌 문서의 어느 곳에나 배치 할 수 있습니다.</dd>
</dl>
<h2 id="CSS_스타일링">CSS 스타일링</h2>
<p><code><label></code> 요소에 대한 특별한 스타일 고려 사항은 없습니다. 구조적으로 단순한 인라인 요소이므로 {{htmlelement ( "span")}} 또는 {{htmlelement ( "a")}} 요소와 같은 방식으로 스타일을 지정할 수 있습니다 }}. 텍스트를 읽기 어렵게하지 않는 한 원하는 방식으로 스타일을 적용 할 수 있습니다.</p>
<h2 id="예제">예제</h2>
<h3 id="간단한_label_예제">간단한 label 예제</h3>
<pre class="brush: html"><label>Click me <input type="text"></label></pre>
<p>{{EmbedLiveSample('간단한_label_예제', '200', '50', '')}}</p>
<h3 id="for_속성_예제">"for" 속성 예제</h3>
<pre class="brush: html"><label for="username">Click me</label>
<input type="text" id="username"></pre>
<p>{{EmbedLiveSample('for_속성_예제', '200', '50', '')}}</p>
<h2 id="접근성_고려사항">접근성 고려사항</h2>
<h3 id="인터랙티브_콘텐츠">인터랙티브 콘텐츠</h3>
<p>Don't place interactive elements such as {{HTMLElement("a", "anchors")}} or {{HTMLElement("button", "buttons")}} inside a <code>label</code>. Doing so makes it difficult for people to activate the form input associated with the <code>label</code>.</p>
<p><code>label</code> 안에 {{HTMLElement ( "a", "anchors")}} 또는 {{HTMLElement ( "button", "buttons")}}와 같은 인터랙티브 요소를 배치하지 마십시오. 그렇게하면 사람들이 <code>label</code>과 관련된 양식을 입력하기 어렵습니다.</p>
<h4 id="하지_마세요">하지 마세요</h4>
<pre class="brush: html example-bad"><label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions">
I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>
</pre>
<h4 id="이렇게_하세요">이렇게 하세요</h4>
<pre class="brush: html example-good"><label for="tac">
<input id="tac" type="checkbox" name="terms-and-conditions">
I agree to the Terms and Conditions
</label>
<p>
<a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
</pre>
<h3 id="제목">제목</h3>
<p>제목은 일반적으로 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#navigation">탐색 목적</a>의 보조 도구로 사용되므로 <code><label></code> 내에 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">제목 요소</a>를 배치하면 많은 종류의 보조 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우, <code><label></code> 요소에 적용된 CSS 클래스를 사용하십시오.</p>
<p><a href="/en-US/docs/Web/HTML/Element/form">양식(form)</a> 또는 양식의 섹션에 제목이 필요한 경우 {{HTMLElement ( "fieldset")}} 내에 배치 된 {{HTMLElement ( "legend")}} 요소를 사용하십시오.</p>
<h4 id="하지_마세요_2">하지 마세요</h4>
<pre class="brush: html example-bad"><label for="your-name">
<h3>Your name</h3>
<input id="your-name" name="your-name" type="text">
</label>
</pre>
<h4 id="이렇게_하세요_2">이렇게 하세요</h4>
<pre class="brush: html example-good"><label class="large-label" for="your-name">
Your name
<input id="your-name" name="your-name" type="text">
</label> </pre>
<h3 id="버튼">버튼</h3>
<p><code>type="button"</code>선언과 유효한 <code>value</code> 속성을 가진 {{HTMLElement ( "input")}} 요소에는 연관된 레이블이 필요하지 않습니다. 그렇게하면 보조 기술이 버튼 입력을 구문 분석하는 방법을 실제로 방해 할 수 있습니다. {{HTMLElement ( "button")}} 요소에도 동일하게 적용됩니다.</p>
<h2 id="기술_요약">기술 요약</h2>
<table class="properties">
<tbody>
<tr>
<th scope="row"><a href="/ko/docs/Web/Guide/HTML/Content_categories">콘텐츠 카테고리</a></th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#플로우_콘텐츠">플로우 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#대화형_콘텐츠">대화형 콘텐츠</a>, <a href="/ko/docs/Web/Guide/HTML/Content_categories#양식_관련_콘텐츠">양식 관련 콘텐츠</a>, 뚜렷한 콘텐츠.</td>
</tr>
<tr>
<th scope="row">가능한 콘텐츠</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>. 단, 다른 <code><label></code> 요소는 자손으로 올 수 없습니다. 레이블을 지정한 컨트롤 외의 다른 <a href="/ko/docs/Web/Guide/HTML/Content_categories#레이블_가능">레이블 가능</a> 요소는 자손으로 사용할 수 없습니다.</td>
</tr>
<tr>
<th scope="row">태그 생략</th>
<td>{{no_tag_omission}}</td>
</tr>
<tr>
<th scope="row">가능한 부모 요소</th>
<td><a href="/ko/docs/Web/Guide/HTML/Content_categories#구문_콘텐츠">구문 콘텐츠</a>를 허용하는 모든 요소.</td>
</tr>
<tr>
<th scope="row">가능한 ARIA 역할</th>
<td>없음</td>
</tr>
<tr>
<th scope="row">DOM 인터페이스</th>
<td>{{domxref("HTMLLabelElement")}}</td>
</tr>
</tbody>
</table>
<h2 id="명세">명세</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', 'forms.html#the-label-element', '<label>')}}</td>
<td>{{Spec2('HTML WHATWG')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '<label>')}}</td>
<td>{{Spec2('HTML5 W3C')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '<label>')}}</td>
<td>{{Spec2('HTML4.01')}}</td>
<td>최초 정의</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("html.elements.label")}}</p>
|
