diff options
Diffstat (limited to 'files/ko/web/html/element/textarea/index.html')
| -rw-r--r-- | files/ko/web/html/element/textarea/index.html | 158 |
1 files changed, 158 insertions, 0 deletions
diff --git a/files/ko/web/html/element/textarea/index.html b/files/ko/web/html/element/textarea/index.html new file mode 100644 index 0000000000..a59be6f9dc --- /dev/null +++ b/files/ko/web/html/element/textarea/index.html @@ -0,0 +1,158 @@ +--- +title: <textarea> +slug: Web/HTML/Element/textarea +tags: + - Element + - Forms + - HTML + - HTML forms + - Web +translation_of: Web/HTML/Element/textarea +--- +<div>{{HTMLRef}}</div> + +<p><strong>HTML <code><textarea></code> 요소</strong>는 멀티라인 일반 텍스트 편집 컨트롤을 나타냅니다.</p> + +<div>{{EmbedInteractiveExample("pages/tabbed/textarea.html", "tabbed-standard")}}</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> + +<h2 id="사용_문맥">사용 문맥</h2> + +<ul class="htmlelt"> + <li><dfn><a href="/en-US/docs/HTML/Content_categories" title="HTML/Content_categories">컨텐츠 범주</a></dfn> <a href="/en-US/docs/HTML/Content_categories#Flow_content" title="HTML/Content categories#Flow content">플로우 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content categories#Phrasing content">구문 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Interactive_content" title="HTML/Content categories#Interactive content">대화형 컨텐츠</a>, <a href="/en-US/docs/HTML/Content_categories#Form_listed" title="HTML/Content categories#Form listed">listed</a>, <a href="/en-US/docs/HTML/Content_categories#Form_labelable" title="HTML/Content categories#Form labelable">labelable</a>, <a href="/en/HTML/Content_categories#form_resettable" title="en/HTML/Content categories#form resettable">resettable</a>, and <a href="/en-US/docs/HTML/Content_categories#Form_submittable" title="HTML/Content categories#Form submittable">submittable</a> <a href="/en-US/docs/HTML/Content_categories#Form-associated_" title="HTML/Content categories#Form-associated ">form-associated</a> element.</li> + <li><dfn>허용되는 컨텐츠</dfn> 문자 데이터</li> + <li><dfn>태그 생략</dfn> {{no_tag_omission}}</li> + <li><dfn>허용되는 부모 요소</dfn> <a href="/en-US/docs/HTML/Content_categories#Phrasing_content" title="HTML/Content_categories#Phrasing_content">구문 컨텐츠</a>를 허용하는 모든 요소</li> + <li><dfn>DOM 인터페이스</dfn> {{domxref("HTMLTextAreaElement")}}</li> +</ul> + +<h2 id="속성">속성</h2> + +<p><span style="line-height: 21px;">이 요소는 </span><a href="https://developer.mozilla.org/en-US/docs/HTML/Global_attributes" style="line-height: 21px;" title="HTML/Global attributes">전역 속성</a>을 포함합니다.</p> + +<dl> + <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt> + <dd>This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: + <ul> + <li><code>none</code>: Completely disables automatic capitalization</li> + <li><code>sentences</code>: Automatically capitalize the first letter of sentences.</li> + <li><code>words</code>: Automatically capitalize the first letter of words.</li> + <li><code>characters</code>: Automatically capitalize all characters.</li> + <li><code>on</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + <li><code>off</code>: {{deprecated_inline()}} Deprecated since iOS 5.</li> + </ul> + </dd> + <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline("5")}}</dt> + <dd>This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are: + <ul> + <li><code>off</code>: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method; the browser does not automatically complete the entry.</li> + <li><code>on</code>: The browser can automatically complete the value based on values that the user has entered during previous uses.</li> + </ul> + + <p>If the <strong>autocomplete</strong> attribute is not specified on an textarea element, then the browser uses the <strong>autocomplete</strong> attribute value of the <code><textarea></code> element's form owner. The form owner is either the <code>form</code> element that this <code><textarea></code> element is a descendant of or the form element whose <strong>id</strong> is specified by the <strong>form</strong> attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.</p> + </dd> + <dt>{{ htmlattrdef("autofocus") }} {{ HTMLVersionInline("5") }}</dt> + <dd>이 불리언 속성은 페이지가 로드 됬을때, 포커스를 오버라이드(예:사용자가 다른 컨트롤에 타이핑) 하지 않는다면, 폼 컨트롤이 입력 포커스를 받을지를 지정합니다.문서에서 오직 하나의 폼 관련 요소만이 이 속성이 지정될수 있습니다.</dd> + <dt>{{ htmlattrdef("cols") }}</dt> + <dd>The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is <span style="font-family: courier new;">20</span> (HTML5).</dd> + <dt>{{ htmlattrdef("disabled") }}</dt> + <dd>사용자가 컨트롤과 상호작용할수 없다는것을 가리키는 불리언 속성 (만약 속성이 지정되지 않았다면, 이 요소를 포함하는 컨테이닝 요소(예: {{ HTMLElement("fieldset") }})에게서 값을 상속받습니다. 예를 들면, disabled 속성을 가진 컨테이닝 요소가 없다면, 컨트롤은 사용 가능합니다)</dd> + <dt>{{ htmlattrdef("form") }} {{ HTMLVersionInline("5") }}</dt> + <dd>The form element that the textarea element is associated with (its "form owner"). The value of the attribute must be an ID of a form element in the same document. If this attribute is not specified, the textarea element must be a descendant of a form element. This attribute enables you to place textarea elements anywhere within a document, not just as descendants of their form elements.</dd> + <dt>{{ htmlattrdef("maxlength") }} {{ HTMLVersionInline("5") }}</dt> + <dd>사용자가 입력할 수 있는 문자(Unicode code points)의 최대 개수. 만약 명시하지 않을 경우 사용자는 무한으로 입력 가능.</dd> + <dt>{{ htmlattrdef("minlength") }} {{ HTMLVersionInline("5") }}</dt> + <dd>사용자가 입력해야 할 문자(Unicode code points)의 최소 개수</dd> + <dt>{{ htmlattrdef("name") }}</dt> + <dd>컨트롤의 이름</dd> + <dt>{{ htmlattrdef("placeholder") }} {{ HTMLVersionInline("5") }}</dt> + <dd>A hint to the user of what can be entered in the control. The placeholder text must not contain carriage returns or line-feeds.</dd> + <dt>{{ htmlattrdef("readonly") }}</dt> + <dd>이 불리언 속성은 사용자가 컨트롤의 값을 수정할수 없다는것을 가리킵니다. <code>disabled</code> 속성과는 다르게, <code>readonly</code> 속성은 사용자가 컨트롤을 클릭하거나 선택하는것을 막지 않습니다.<code> readonly</code> 컨트롤의 값은 여전히 폼과 함께 제출 됩니다..</dd> + <dt>{{ htmlattrdef("required") }} {{ HTMLVersionInline("5") }}</dt> + <dd>이 속성은 사용자가 폼을 제출하기 전에 반드시 채워야 한다는 것을 가리킵니다.</dd> + <dt>{{ htmlattrdef("rows") }}</dt> + <dd>The number of visible text lines for the control.</dd> + <dt>{{ htmlattrdef("selectionDirection") }} {{ HTMLVersionInline("5") }}</dt> + <dd>The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. This can be "none" if the selection direction is unknown.</dd> + <dt>{{ htmlattrdef("selectionEnd") }}</dt> + <dd>The index to the last character in the current selection.</dd> + <dt>{{ htmlattrdef("selectionStart") }}</dt> + <dd>The index to the first character in the current selection.</dd> + <dt>{{ htmlattrdef("spellcheck") }} {{ HTMLVersionInline(5) }}</dt> + <dd>Setting the value of this attribute to <code>true</code> indicates that the element needs to have its spelling and grammar checked. The value <code>default</code> indicates that the element is to act according to a default behavior, possibly based on the parent element's own <code>spellcheck</code> value. The value <code>false</code> indicates that the element should not be checked.</dd> + <dt>{{ htmlattrdef("wrap") }} {{ HTMLVersionInline("5") }}</dt> + <dd>Indicates how the control wraps text. Possible values are: + <ul> + <li><span style="font-family: courier new;">hard</span>: The browser automatically inserts line breaks (CR+LF) so that each line has no more than the width of the control; the <code>cols</code> attribute must be specified.</li> + <li><span style="font-family: courier new;">soft</span>: The browser ensures that all line breaks in the value consist of a CR+LF pair, but does not insert any additional line breaks.</li> + </ul> + + <p>If this attribute is not specified, <span style="font-family: courier new;">soft</span> is its default value.</p> + </dd> +</dl> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 요소는 <code><a href="/en/DOM/HTMLTextAreaElement" title="en/DOM/textarea">HTMLTextAreaElement</a></code> 인터페이스를 구현합니다.</p> + +<p>{{ h1_gecko_minversion("Resizable textareas", "2.0") }}</p> + +<p>{{ gecko("2.0") }} introduced support for resizable textareas. This is controlled by the {{ cssxref("resize") }} CSS property. Resizing of textareas is enabled by default, but you can explicitly disable it by including the following CSS:</p> + +<pre>textarea { + resize: none; +} +</pre> + +<h2 id="CSS와_상호작용_하기">CSS와 상호작용 하기</h2> + +<p>In regards to CSS, an <code><textarea></code> is a <a href="https://developer.mozilla.org/en-US/docs/CSS/Replaced_element" title="/en-US/docs/CSS/Replaced_element">replaced element</a>. The HTML specification doesn't define where the baseline of a <code><textarea></code> is. So different browsers set it to different positions. For Gecko, the <code><textarea></code> baseline is set on the baseline of the first line of the textarea's first line, on another browser it may be set on the bottom of the <code><textarea></code> box. Don't use {{cssxref("vertical-align")}}<code>: baseline</code> on it, as the behavior will be unpredictable.</p> + +<p><em>Textarea</em> 는 래스터 이미지 처럼 고유한 넓이를 가지고 있습니다.</p> + +<h2 id="Example" name="Example">예제</h2> + +<h3 id="HTML_Content">HTML Content</h3> + +<pre class="brush: html"><textarea name="textarea" rows="10" cols="50">Write something here</textarea></pre> + +<p>{{ EmbedLiveSample('Example','600','200') }}</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', 'the-button-element.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '<textarea>')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '<textarea>')}}</td> + <td>{{Spec2('HTML4.01')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("html.elements.textarea")}}</p> + +<h2 id="같이_보기">같이 보기</h2> + +<p>다른 폼 관련 요소들: {{ HTMLElement("form") }}, {{ HTMLElement("button") }}, {{ HTMLElement("datalist") }}, {{ HTMLElement("legend") }}, {{ HTMLElement("label") }}, {{ HTMLElement("select") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }} and {{ HTMLElement("meter") }}.</p> |