diff options
Diffstat (limited to 'files/ko/web/html/element/label/index.html')
| -rw-r--r-- | files/ko/web/html/element/label/index.html | 189 |
1 files changed, 189 insertions, 0 deletions
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><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('Simple_label_example', '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('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"><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> |