HTML DOM의 rows 속성은 HTML 문서 내 <textarea>(텍스트 영역) 요소의 rows 속성 값을 가져오거나 수정할 때 사용됩니다. rows 속성은 화면에 한 번에 보이는 텍스트 줄(행)의 개수를 결정하므로, 이 값을 조절하면 텍스트 영역의 세로 크기를 동적으로 변경할 수 있습니다.
문법(Syntax)
rows 속성의 기본 문법은 다음과 같습니다.
1. rows 값 가져오기
object.rows
2. rows 값 설정하기
object.rows = "number"
number 자리에는 표시할 행 수를 나타내는 숫자를 입력합니다. 예를 들어 8을 지정하면 텍스트 영역에 8줄이 화면에 표시됩니다.
예제(Example)
다음은 HTML DOM Textarea rows 속성을 활용한 실제 예제입니다. 버튼을 클릭하면 텍스트 영역의 행 수가 8로 변경됩니다.
<!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 rows 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 Rows = 8</button>
<script>
function set() {
document.querySelector("textarea").rows = '8';
}
</script>
</body>
</html>
실행 결과(Output)
위 코드를 실행하면 초기 상태의 텍스트 영역과 빨간색 버튼이 화면에 나타납니다.
이제 "Set Rows = 8" 버튼을 클릭해 보세요. 클릭하는 순간 JavaScript의 set() 함수가 실행되어 텍스트 영역의 rows 속성 값이 8로 설정되고, 텍스트 영역의 높이가 그에 맞게 늘어나는 것을 확인할 수 있습니다.
정리
- 읽기:
element.rows→ 현재 설정된 행 수를 반환합니다. - 쓰기:
element.rows = 숫자→ 텍스트 영역의 표시 행 수를 동적으로 변경합니다. - 사용자 입력 폼에서 텍스트 영역 크기를 유동적으로 조절해야 할 때 유용하게 활용할 수 있습니다.