From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:42:17 -0500
Subject: initial commit

---
 files/ko/web/html/element/label/index.html | 189 +++++++++++++++++++++++++++++
 1 file changed, 189 insertions(+)
 create mode 100644 files/ko/web/html/element/label/index.html

(limited to 'files/ko/web/html/element/label')

diff --git a/files/ko/web/html/element/label/index.html b/files/ko/web/html/element/label/index.html
new file mode 100644
index 0000000000..2d99a140c5
--- /dev/null
+++ b/files/ko/web/html/element/label/index.html
@@ -0,0 +1,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>&lt;label&gt;</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>&lt;label&gt;</code> 을 {{htmlelement("input")}} 요소와 연결하면 몇 가지 이점이 있습니다:</p>
+
+<ul>
+ <li>label 텍스트는 텍스트 입력과 시각적으로 관련이 있을뿐만 아니라 프로그래밍적으로도 관련이 있습니다. 예를 들어, 화면리더기(screenreader) 는 폼 입력(form input)에서 label 을 읽어서 보조기술(assistive technology) 사용자가 입력해야하는 텍스트가 무엇인지 더 쉽게 이해할 수 있게 합니다. </li>
+ <li>관련 label 을 클릭해서 input  자체에 초점을 맞추거나 활성화를 시킬 수 있습니다. (활성되어서)늘어난 누를 수 있는 영역(hit area)은 터치스크린 사용자를 포함해 입력하려하는 모든 사람에게 이점을 줍니다.</li>
+</ul>
+
+<p><code>&lt;label&gt;</code> 을 <code>&lt;input&gt;</code> 요소와 연관시키려면, <code>&lt;input&gt;</code> 에 <code>id</code> 속성을 넣어야합니다. 그런 다음 <code>&lt;label&gt;</code> 에 <code>id</code> 와 같은 값의  <code>for</code> 속성을 넣어야합니다. </p>
+
+<p>또는, <code>&lt;label&gt;</code> 안에 <code>&lt;input&gt;</code> 을 중첩시킬 수 있습니다. 이 경우 연관이 암시적이므로 <code>for</code> 및 <code>id</code>속성이 필요없습니다.</p>
+
+<pre class="brush: html">&lt;label&gt;Do you like peas?
+  &lt;input type="checkbox" name="peas"&gt;
+&lt;/label&gt;
+</pre>
+
+<p>다른 사용법 메모:</p>
+
+<ul>
+ <li>label 이 붙여진 양식 컨트롤(form control) 은 <em>레이블된 제어 labeled control</em>  라고 불립니다. 하나의 input 은 여러 label들에 연관되어있습니다.</li>
+ <li>연관된 양식 컨트롤(form control) 이 있는 <code>&lt;label&gt;</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>&lt;label&gt;</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>&lt;label&gt;</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>&lt;label&gt;</code> 요소에 대한 특별한 스타일 고려 사항은 없습니다. 구조적으로 단순한 인라인 요소이므로 {{htmlelement ( "span")}} 또는 {{htmlelement ( "a")}} 요소와 같은 방식으로 스타일을 지정할 수 있습니다 }}. 텍스트를 읽기 어렵게하지 않는 한 원하는 방식으로 스타일을 적용 할 수 있습니다.</p>
+
+<h2 id="예제">예제</h2>
+
+<h3 id="간단한_label_예제">간단한 label 예제</h3>
+
+<pre class="brush: html">&lt;label&gt;Click me &lt;input type="text"&gt;&lt;/label&gt;</pre>
+
+<p>{{EmbedLiveSample('Simple_label_example', '200', '50', '')}}</p>
+
+<h3 id="for_속성_예제">"for" 속성 예제</h3>
+
+<pre class="brush: html">&lt;label for="username"&gt;Click me&lt;/label&gt;
+&lt;input type="text" id="username"&gt;</pre>
+
+<p>{{EmbedLiveSample('Using_the_for_attribute', '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">&lt;label for="tac"&gt;
+  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
+  I agree to the &lt;a href="terms-and-conditions.html"&gt;Terms and Conditions&lt;/a&gt;
+&lt;/label&gt;
+</pre>
+
+<h4 id="이렇게_하세요">이렇게 하세요</h4>
+
+<pre class="brush: html example-good">&lt;label for="tac"&gt;
+  &lt;input id="tac" type="checkbox" name="terms-and-conditions"&gt;
+  I agree to the Terms and Conditions
+&lt;/label&gt;
+&lt;p&gt;
+  &lt;a href="terms-and-conditions.html"&gt;Read our Terms and Conditions&lt;/a&gt;
+&lt;/p&gt;
+</pre>
+
+<h3 id="제목">제목</h3>
+
+<p>제목은 일반적으로 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements#Navigation">탐색 목적</a>의 보조 도구로 사용되므로 <code>&lt;label&gt;</code>  내에 <a href="/en-US/docs/Web/HTML/Element/Heading_Elements">제목 요소</a>를 배치하면 많은 종류의 보조 기술을 방해합니다. label의 텍스트를 시각적으로 조정해야하는 경우,  <code>&lt;label&gt;</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">&lt;label for="your-name"&gt;
+  &lt;h3&gt;Your name&lt;/h3&gt;
+  &lt;input id="your-name" name="your-name" type="text"&gt;
+&lt;/label&gt;
+</pre>
+
+<h4 id="이렇게_하세요_2">이렇게 하세요</h4>
+
+<pre class="brush: html example-good">&lt;label class="large-label" for="your-name"&gt;
+  Your name
+  &lt;input id="your-name" name="your-name" type="text"&gt;
+&lt;/label&gt; </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>&lt;label&gt;</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', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML5 W3C', 'forms.html#the-label-element', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML5 W3C')}}</td>
+   <td></td>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.9.1', '&lt;label&gt;')}}</td>
+   <td>{{Spec2('HTML4.01')}}</td>
+   <td>최초 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{Compat("html.elements.label")}}</p>
-- 
cgit v1.2.3-54-g00ecf