실행 가능한 HTML 문서: textarea 태그

Q: HTML에서 textarea는 어떻게 만드나요?

폼 안에 과 함께 를 쓰세요. 과 달리 닫는 태그가 있고, 태그 사이의 내용이 시작 텍스트가 돼요.

Q: textarea의 기본값은 어떻게 정하나요?

태그 사이에 텍스트를 넣으세요. Hello 처럼요. HTML에서 textarea에는 value 속성이 없어요. JavaScript에서는 textarea.value를 읽고 설정하세요.

Q: textarea 크기 조절을 막으려면 어떻게 하나요?

CSS에서 resize: none을 지정하세요. 보통은 resize: vertical이 더 친절해요. 긴 글을 쓸 때 높이는 늘릴 수 있지만, 옆으로 끌어서 레이아웃을 깨뜨릴 수는 없어요.

Q: textarea의 글자 수를 제한하려면 어떻게 하나요?

maxlength="280"을 추가하세요. 그 길이에서 브라우저가 입력을 더 받지 않아요. 남은 글자 수를 알 수 있도록 input 이벤트로 업데이트되는 카운터를 옆에 보여 주고, 서버에서도 길이를 확인하세요.

textarea 만드는 법

<textarea>는 여러 줄을 입력하는 텍스트 필드예요. 메시지, 댓글, 설명 같은 데 써요. rows는 보이는 높이를 줄 수로 정해요. 몇 줄 입력하고 Send를 눌러 보세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

<input>과 다른 점이 두 가지예요. textarea는 닫는 태그가 필요하고, 시작 텍스트는 value 속성이 아니라 태그 사이에 들어가요. name과 함께 텍스트가 값으로 전송되고, 줄바꿈도 포함돼요.

textarea 속성

속성	하는 일
`name`	텍스트를 보낼 때 쓰는 키
`rows`	보이는 높이(줄 수, 기본값 2)
`cols`	보이는 너비(글자 수, 기본값 20). 보통 CSS `width`가 더 나아요
`placeholder`	비어 있을 때 보이는 힌트
`maxlength`, `minlength`	글자 수 제한
`required`	비어 있으면 안 됨
`readonly`	선택하고 복사할 수는 있지만 편집은 안 됨. 여전히 전송됨
`disabled`	쓸 수 없고 전송되지 않음
`wrap`	`soft`(기본값) 또는 `hard`, 아래 참고
`spellcheck`	`true` 또는 `false`

기본 텍스트는 태그 사이에 들어가요

<textarea>와 </textarea> 사이의 모든 것이 쓴 그대로 시작 텍스트가 돼요. 공백, 탭, 줄바꿈까지 포함해서요. 여는 태그 바로 뒤의 줄바꿈 하나만 무시돼요. 그래서 들여쓰기가 함정이 돼요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

두 번째 textarea는 공백 네 칸으로 시작하고 줄바꿈과 공백 두 칸으로 끝나서, 독자가 모두 지워야 해요. 기본 텍스트는 태그에 딱 붙여 쓰세요.

textarea 안의 HTML은 렌더링되지 않아요. 태그 사이의 <b>hi</b>는 글자 그대로 보여요.

너비, 크기 조절, 자동으로 늘어나기

브라우저는 독자가 모서리를 끌어 textarea 크기를 바꿀 수 있게 해요. CSS resize로 이걸 제한하고, box-sizing: border-box와 함께 쓴 width: 100%로 컨테이너를 정확히 채울 수 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

마지막 textarea는 키를 누를 때마다 높이를 초기화한 뒤 scrollHeight(내용과 padding의 높이)에 테두리를 더한 값으로 설정해요. 여러 줄을 입력해 보세요. 스크롤바가 절대 나타나지 않아요. resize: vertical이 가장 친절한 기본값이에요. 긴 답변에는 공간이 생기고, 누구도 필드를 레이아웃보다 넓게 끌 수 없어요.

Chromium 계열 브라우저는 field-sizing: content로 CSS만으로도 자동으로 늘어나게 할 수 있어요. 지원하지 않는 브라우저는 그 줄을 무시하고 원래 크기를 유지하니 추가해도 안전하지만, 모든 독자에게 늘어나는 상자를 주려면 스크립트를 남겨 두세요.

maxlength와 글자 수 카운터

maxlength는 정해진 글자 수에서 입력을 멈춰요. 그것만으로는 아무 경고도 없어서, 독자는 입력이 안 될 때에야 알아채요. 카운터가 그걸 해결해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby는 스크린 리더가 필드와 함께 카운터를 읽게 하고, aria-live="polite"는 키 입력 사이에 카운터의 변화를 알려 줘요. maxlength는 브라우저에서만 강제되니 서버에서도 길이를 확인해야 해요.

제출된 텍스트의 줄바꿈

독자가 넣은 줄바꿈은 텍스트와 함께 전송돼요. 제출 데이터에서 각 줄바꿈은 캐리지 리턴과 라인 피드 쌍(URL 인코딩된 폼에서는 %0D%0A)이 되는데, 대부분의 서버가 기대하는 형태예요. 나중에 페이지에서 줄바꿈과 함께 보여 주려면 출력할 때 <br>로 바꾸거나 요소에 white-space: pre-line을 주세요.

wrap="hard"(cols가 필요해요)는 한발 더 나아가, 화면에서 텍스트가 줄바꿈된 곳에도 줄바꿈을 넣어서 서버가 cols 글자보다 길지 않은 줄을 받게 해요. 기본값 wrap="soft"는 독자가 입력한 줄바꿈만 보내요.

textarea 꾸미기

Chrome과 Firefox는 textarea에 약 13px의 고정폭 글꼴을 줘서 textarea가 어색해 보이는 경우가 많아요. font: inherit로 고치세요. 테두리를 바꾼다면 포커스 스타일도 보이게 유지하세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

placeholder 텍스트도 읽을 수 있는 명암비를 갖춰야 해요. 많은 디자인에서 쓰는 연한 회색은 읽기 어려워요. 그리고 다른 필드와 마찬가지로 placeholder는 라벨이 아니에요. 독자가 입력하는 순간 사라져요. 라벨은 HTML label에서 다뤄요.

자주 하는 실수

<textarea value="...">. value 속성은 없어요. 텍스트를 태그 사이에 넣으세요.
HTML과 함께 기본 텍스트도 들여씀. 공백이 값의 일부가 돼요.
스스로 닫는 <textarea />를 씀. 빈 요소가 아니라서, </textarea>가 없으면 페이지의 나머지가 텍스트로 그 안에 삼켜져요.
font: inherit가 없음. 필드가 작은 고정폭 글꼴을 써요.
작은 고정 높이에 resize: none을 줌. 긴 답변이 조그만 스크롤 상자에 갇혀요.
maxlength에만 의존함. 서버에서도 길이를 검사하세요.

자주 묻는 질문

HTML에서 textarea는 어떻게 만드나요?

폼 안에 <label>과 함께 <textarea name="message" rows="4"></textarea>를 쓰세요. <input>과 달리 닫는 태그가 있고, 태그 사이의 내용이 시작 텍스트가 돼요.

textarea의 기본값은 어떻게 정하나요?

태그 사이에 텍스트를 넣으세요. <textarea name="bio">Hello</textarea>처럼요. HTML에서 textarea에는 value 속성이 없어요. JavaScript에서는 textarea.value를 읽고 설정하세요.

textarea 크기 조절을 막으려면 어떻게 하나요?

CSS에서 resize: none을 지정하세요. 보통은 resize: vertical이 더 친절해요. 긴 글을 쓸 때 높이는 늘릴 수 있지만, 옆으로 끌어서 레이아웃을 깨뜨릴 수는 없어요.

textarea의 글자 수를 제한하려면 어떻게 하나요?

maxlength="280"을 추가하세요. 그 길이에서 브라우저가 입력을 더 받지 않아요. 남은 글자 수를 알 수 있도록 input 이벤트로 업데이트되는 카운터를 옆에 보여 주고, 서버에서도 길이를 확인하세요.

textarea는 왜 글꼴이 다르게 나오나요?

Chrome과 Firefox는 textarea에 기본으로 약 13px의 고정폭 글꼴을 줘요. 페이지의 나머지 부분과 맞추려면 font: inherit를 추가하세요.

HTML textarea: rows, 크기 조절, maxlength, 기본 텍스트