HTML cols 속성이란?
HTML의 cols 속성은 <textarea> 요소와 <frameset> 요소 두 곳에서 사용할 수 있습니다. 다만 <frameset> 태그는 HTML5에서 공식적으로 지원되지 않으므로, 이 글에서는 실무에서 자주 사용하는 <textarea> 요소의 cols 속성을 중심으로 살펴보겠습니다.
<textarea> 요소의 cols 속성은 텍스트 입력 영역의 가로 폭(너비)을 지정하는 역할을 합니다. 여기에 설정한 값에 따라 화면에 표시되는 textarea의 너비가 결정되며, 별도의 CSS 없이도 간단하게 크기를 조절할 수 있다는 장점이 있습니다.
cols 속성 기본 문법
cols 속성의 기본적인 작성 형식은 다음과 같습니다.
<textarea cols="num">
여기서 num은 textarea의 너비를 의미하며, 한 줄에 표시할 평균 문자 수를 기준으로 합니다. 만약 cols 값을 지정하지 않으면 기본값 20이 적용됩니다.
cols 속성 활용 예제
다음은 면접 질문 답변 입력창을 만들면서 <textarea>의 cols 속성을 함께 적용한 예제입니다. 두 개의 입력창 모두 cols="70"으로 너비를 넉넉하게 설정했습니다.
<!DOCTYPE html> <html> <body> <h2>면접 질문</h2> <p>에디터 직무에 지원한 이유는 무엇인가요? (100자)</p> <textarea rows="6" cols="70" autofocus> 100자 이내로 답변을 작성해 주세요... </textarea> <p>본인의 약점은 무엇이라고 생각하나요? (50자)</p> <textarea rows="4" cols="70" autofocus> 50자 이내로 답변을 작성해 주세요... </textarea> </body> </html>
실행 결과
위 코드를 브라우저에서 실행하면 각 질문 아래에 cols="70"으로 설정된 넓은 입력창이 나타납니다. 첫 번째 입력창은 rows="6", 두 번째 입력창은 rows="4"로 세로 높이도 함께 조절되어, 용도에 맞는 입력 공간을 제공합니다.
알아두면 좋은 팁
- rows 속성과 함께 사용: cols는 가로 폭을, rows는 세로 높이를 결정하므로 두 속성을 함께 지정하면 원하는 크기를 정확하게 만들 수 있습니다.
- CSS 대안: 최신 웹 개발에서는
width스타일 속성을 사용해 textarea 너비를 픽셀(px) 또는 백분율(%) 단위로 더 유연하게 제어할 수도 있습니다. - 반응형 고려: 모바일 환경에서는 고정된 cols 값보다 CSS의 상대 단위를 활용하는 것이 화면 크기에 더 잘 대응합니다.