HTML rows 속성 완벽 가이드 – textarea 높이 설정 방법과 예제

HTML의 rows 속성은 <textarea> 요소가 화면에 표시되는 세로 높이(줄 수)를 지정하는 데 사용되는 속성입니다. 이 값을 조절하면 사용자가 입력 폼에서 몇 줄의 텍스트를 한 번에 볼 수 있는지 결정할 수 있습니다.

문법(Syntax)

rows 속성의 기본적인 사용 문법은 다음과 같습니다.

<textarea rows="숫자"></textarea>

여기서 '숫자' 자리에는 양의 정수 값을 입력하며, 이 값은 텍스트 영역에 표시될 줄(line)의 개수를 의미합니다. 참고로 rows 속성을 지정하지 않으면 대부분의 브라우저에서 기본값인 2줄로 표시됩니다.

예제(Example)

아래 예제를 통해 HTML rows 속성이 실제로 어떻게 동작하는지 살펴보겠습니다.

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML rows Demo</h1>
<textarea rows="10" cols="20">Hi! I'm a textarea element with some dummy text.</textarea>
</body>
</html>

실행 결과(Output)

위 코드를 실행하면 세로로 10줄, 가로로 20자 크기의 텍스트 영역이 화면에 나타납니다. 즉, rows="10" 설정 덕분에 텍스트 상자의 높이가 10줄 분량으로 확장된 것을 확인할 수 있습니다.

HTML rows 속성 완벽 가이드 – textarea 높이 설정 방법과 예제

참고 사항

rows 속성은 세로 높이를 담당하며, 가로 너비는 cols 속성으로 함께 지정하는 것이 일반적입니다. 또한 CSS의 height 속성을 사용하면 픽셀 단위 등 더 유연하게 높이를 제어할 수 있으므로, 상황에 따라 두 방식을 적절히 활용하면 좋습니다.