웹 폼을 만들다 보면 사용자가 입력하는 내용의 길이에 따라 텍스트 영역(textarea)의 높이가 자동으로 늘어나거나 줄어들도록 구현해야 하는 경우가 많습니다. 이번 글에서는 외부 라이브러리 없이 순수 JavaScript만을 사용하여 자동 크기 조절(auto-resize) 텍스트 영역을 만드는 방법을 알아보겠습니다.
핵심 원리
자동 크기 조절의 동작 원리는 매우 간단합니다.
- 사용자가 텍스트를 입력할 때마다 발생하는
input이벤트를 감지합니다. - 먼저 요소의 높이를
auto로 초기화하여 현재 내용에 맞는 기본 높이를 다시 계산합니다. - 이후
scrollHeight(스크롤 없이 전체 콘텐츠를 표시하는 데 필요한 높이) 값을 읽어와 요소의 높이로 지정합니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>자동 크기 조절 텍스트 영역</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>자동 크기 조절 텍스트 영역 만들기</h1>
<textarea class="resizeArea"></textarea>
<script>
let resizeEle = document.querySelector(".resizeArea");
resizeEle.addEventListener("input", resizeTextArea, false);
function resizeTextArea() {
this.style.height = "auto";
this.style.height = this.scrollHeight + "px";
}
</script>
</body>
</html>
코드 설명
document.querySelector(".resizeArea")를 통해 크기를 자동으로 조절할 대상 textarea 요소를 선택합니다.addEventListener("input", resizeTextArea)를 사용해 입력 이벤트가 발생할 때마다 크기 조절 함수가 실행되도록 등록합니다.this.style.height = "auto"는 기존에 설정된 높이를 제거하여 현재 내용을 기준으로 높이를 다시 계산하게 합니다. 이 과정이 없으면 텍스트를 삭제해도 높이가 줄어들지 않습니다.this.scrollHeight + "px"를 새 높이로 적용하면 입력된 내용이 모두 보이도록 영역이 자연스럽게 확장됩니다.
실행 결과
처음 화면에는 기본 크기의 텍스트 영역이 표시됩니다.
텍스트 영역에 여러 줄의 텍스트를 입력하거나 붙여넣으면 아래와 같이 영역이 자동으로 확장됩니다.
