HTML DOM Textarea cols 속성 – 문법과 예제로 배우는 사용법

Textarea cols 속성이란?

HTML DOM의 Textarea cols 속성은 HTML 문서 내 textarea 요소의 cols 속성 값을 가져오거나 수정할 때 사용됩니다. cols 속성은 텍스트 영역(textarea)에 한 줄에 표시되는 평균 문자 수를 의미하며, 이 값을 통해 텍스트 영역의 가로 폭을 결정할 수 있습니다.

JavaScript를 활용하면 페이지가 로드된 후에도 동적으로 cols 값을 읽어오거나 변경할 수 있어, 사용자 인터랙션에 따라 입력창 크기를 조절하는 기능을 손쉽게 구현할 수 있습니다.

문법(Syntax)

cols 속성의 기본 문법은 다음과 같습니다.

1. cols 값 반환하기

object.cols

2. cols 값 설정하기

object.cols = "number"

반환 시에는 현재 설정된 열(column) 수가 숫자 형태로 리턴되며, 설정 시에는 원하는 문자 수를 숫자 값으로 지정하면 됩니다.

예제

버튼을 클릭하면 textarea의 cols 값이 50으로 변경되는 간단한 예제입니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        background: lightseagreen;
        height: 100vh;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
    }
</style>
<body>
<h1>DOM Textarea cols Property Demo</h1>
<textarea>Hi! I'm a textarea element in an HTML document with some dummy text.</textarea>
<button onclick="set()" class="btn">Set Cols = 50</button>
<script>
    function set() {
        document.querySelector("textarea").cols = '50';
    }
</script>
</body>
</html>

실행 결과

HTML DOM Textarea cols 속성 – 문법과 예제로 배우는 사용법

위 화면에서 "Set Cols = 50" 버튼을 클릭하면, JavaScript의 set() 함수가 실행되어 textarea 요소의 cols 속성 값이 50으로 설정됩니다.

HTML DOM Textarea cols 속성 – 문법과 예제로 배우는 사용법

결과적으로 텍스트 영역의 가로 폭이 기본값보다 넓어진 것을 확인할 수 있습니다.

참고 사항

cols 속성을 별도로 지정하지 않으면 대부분의 브라우저에서 기본값 20이 적용됩니다. 또한 CSS의 width 속성을 함께 사용하면 더욱 정밀하게 크기를 제어할 수 있으며, rows 속성을 활용하면 세로 줄 수도 함께 조절할 수 있습니다.