HTML <textarea> cols 속성이란?
HTML의 <textarea> 요소에서 cols 속성은 텍스트 영역(여러 줄 입력 상자)의 가로 너비를 지정하는 데 사용됩니다. cols 값으로 문자 수를 설정하면 해당 크기만큼 텍스트 영역의 폭이 화면에 그대로 표시됩니다.
cols 속성 기본 문법
<textarea cols="num">
여기서 num은 텍스트 영역의 너비를 의미하며, 평균적인 문자 개수를 단위로 계산합니다. 별도로 지정하지 않으면 기본값은 20입니다.
cols 속성 사용 예제
다음은 <textarea> 요소의 cols 속성을 실제로 구현한 예제입니다. 면접 질문 답변 입력창 두 개를 만들어 보겠습니다.
<!DOCTYPE html> <html> <body> <h2>면접 질문</h2> <p>에디터 직무에 지원하는 이유는 무엇인가요? (100자)</p> <textarea rows="6" cols="70"> 100자 이내로 답변을 작성해 주세요... </textarea> <p>본인의 약점은 무엇인가요? (50자)</p> <textarea rows="4" cols="70"> 50자 이내로 답변을 작성해 주세요... </textarea> </body> </html>
실행 결과
위 예제에서는 두 개의 textarea를 설정했습니다.
<textarea rows="6" cols="70"> 100자 이내로 답변을 작성해 주세요... </textarea> <p>본인의 약점은 무엇인가요? (50자)</p> <textarea rows="4" cols="70"> 50자 이내로 답변을 작성해 주세요... </textarea>
각 텍스트 영역의 가로 너비는 cols 속성으로 지정되며, 세로 높이는 rows 속성으로 함께 조절할 수 있습니다. 필요에 따라 autofocus 같은 다른 속성도 조합해 사용할 수 있습니다.
<textarea rows="6" cols="70" autofocus>
정리 및 활용 팁
cols 속성은 textarea의 가로 너비를 문자 수 단위로 정의하는 간편한 방법입니다. 다만 HTML5 환경에서는 CSS의 width 속성을 사용하면 픽셀이나 퍼센트 단위로 더 유연하고 반응형적인 레이아웃을 구성할 수 있습니다. 간단한 폼에서는 cols·rows 속성만으로도 충분히 직관적인 입력창을 만들 수 있으니, 프로젝트 성격에 맞게 적절히 활용해 보세요.