웹사이트에서 문의하기, 댓글 작성, 리뷰 입력과 같이 여러 줄 텍스트를 입력해야 하는 경우가 있습니다.
이때 사용하는 HTML 태그가 바로 textarea 태그입니다.
input 태그는 한 줄 입력에 적합하지만, textarea 태그는 여러 줄 입력을 지원하기 때문에 사용 목적에 맞게 구분해서 사용하는 것이 중요합니다.
이번 글에서는 HTML textarea 태그의 기본 사용법, 주요 속성, 그리고 실무에서 활용하는 방법까지 자세히 정리해보겠습니다.
textarea 태그란 무엇인가?
textarea 태그는 여러 줄의 텍스트를 입력할 수 있는 입력 필드입니다.
다른 input 태그와 달리 시작 태그와 종료 태그가 존재하며, 내부에 기본값을 입력할 수 있습니다.
<textarea></textarea>
이 태그를 사용하면 사용자가 여러 줄의 텍스트를 입력할 수 있는 영역이 생성됩니다.
textarea 기본 사용 방법
<textarea rows="5" cols="30"></textarea>
위 코드는 5줄 높이와 30칸 너비의 입력 영역을 생성합니다.
기본값 설정하기
textarea 태그는 내부에 기본 텍스트를 넣을 수 있습니다.
<textarea>기본 내용</textarea>
페이지가 로드될 때 이 내용이 미리 입력된 상태로 표시됩니다.
textarea 주요 속성
rows
입력 영역의 세로 줄 수를 지정합니다.
<textarea rows="5"></textarea>
cols
입력 영역의 가로 너비를 지정합니다.
<textarea cols="30"></textarea>
placeholder
입력 전에 안내 문구를 표시합니다.
<textarea placeholder="내용을 입력하세요"></textarea>
maxlength
입력 가능한 최대 글자 수를 제한합니다.
<textarea maxlength="100"></textarea>
readonly
읽기 전용으로 설정하여 수정할 수 없게 만듭니다.
<textarea readonly>수정 불가</textarea>
disabled
입력 자체를 비활성화합니다.
<textarea disabled></textarea>
textarea와 input의 차이
textarea와 input은 모두 입력 요소지만 역할이 다릅니다.
input
- 한 줄 입력
- 짧은 텍스트
textarea
- 여러 줄 입력
- 긴 텍스트
따라서 입력 내용의 길이에 따라 적절한 태그를 선택해야 합니다.
CSS로 textarea 스타일링
textarea 태그는 CSS를 통해 스타일을 변경할 수 있습니다.
textarea {
width: 100%;
height: 150px;
padding: 10px;
font-size: 14px;
}
이렇게 하면 보다 사용자 친화적인 입력 영역을 만들 수 있습니다.
크기 조절 비활성화
기본적으로 textarea는 사용자가 크기를 조절할 수 있습니다.
이를 막으려면 다음과 같이 설정합니다.
textarea {
resize: none;
}
textarea 활용 예시
문의 폼
<textarea placeholder="문의 내용을 입력하세요"></textarea>
댓글 입력
<textarea rows="4" placeholder="댓글을 입력하세요"></textarea>
리뷰 작성
<textarea maxlength="500" placeholder="리뷰를 작성해주세요"></textarea>
textarea 사용 시 주의할 점
적절한 크기 설정
너무 작으면 입력이 불편하고, 너무 크면 레이아웃이 깨질 수 있습니다.
placeholder와 label 함께 사용
placeholder만 사용하는 것보다 label을 함께 사용하는 것이 접근성에 더 좋습니다.
입력 제한 설정
maxlength를 활용하여 입력 길이를 제한하는 것이 좋습니다.
textarea와 SEO
textarea 자체는 SEO에 직접적인 영향을 주지는 않지만, 사용자 참여를 유도하는 요소로서 중요합니다.
- 댓글 기능 > 콘텐츠 활성화
- 문의 기능 > 사용자 경험 향상
- 리뷰 기능 > 신뢰도 증가
마무리
HTML textarea 태그는 여러 줄 텍스트 입력을 위한 필수 요소입니다.
정리하면 다음과 같습니다.
- textarea는 여러 줄 입력을 위한 태그이다.
- rows, cols, placeholder 등 다양한 속성을 제공한다.
- CSS로 스타일을 자유롭게 변경할 수 있다.
웹사이트를 제작할 때 textarea를 적절히 활용하면 사용자 경험을 크게 개선할 수 있습니다.