path: root/files/ko/web/html/element/textarea/index.html

---
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>&lt;textarea&gt;</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>&lt;textarea&gt;</code> element's form owner. The form owner is either the <code>form</code> element that this <code>&lt;textarea&gt;</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>Gecko 2.0 introduced support for resizable textareas. This is controlled by the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/resize">resize (en-US)</a> 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>&lt;textarea&gt;</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>&lt;textarea&gt;</code> is. So different browsers set it to different positions. For Gecko, the <code>&lt;textarea&gt;</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>&lt;textarea&gt;</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">&lt;textarea name="textarea" rows="10" cols="50"&gt;Write something here&lt;/textarea&gt;</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', '&lt;textarea&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-textarea-element', '&lt;textarea&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.7', '&lt;textarea&gt;')}}</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>