HTML에서 텍스트 영역(<textarea>)에 화면에 표시되는 줄 수를 지정하려면 rows 속성을 사용합니다. 이 속성은 텍스트 영역의 세로 크기를 줄 단위로 결정하며, 값이 클수록 더 많은 줄이 한 번에 표시됩니다.
아래 예제 코드를 실행하면 rows 속성이 실제로 어떻게 작동하는지 확인할 수 있습니다.
예제
<!DOCTYPE html>
<html>
<head>
<title>HTML rows 속성</title>
</head>
<body>
<form action = "/cgi-bin/hello_get.cgi" method = "get">
과목 입력
<br />
<textarea rows = "5" cols = "50" name = "description">
</textarea><br>
<input type = "submit" value = "submit" />
</form>
</body>
</html>코드 설명
- rows="5": 텍스트 영역에 5줄이 표시되도록 세로 높이를 설정합니다.
- cols="50": 텍스트 영역의 가로 너비를 50자 크기로 지정합니다.
- name="description": 폼 제출 시 서버로 전달되는 데이터의 이름을 정의합니다.
참고로 rows와 cols 속성은 텍스트 영역의 초기 크기를 지정할 뿐이며, 사용자가 오른쪽 하단 모서리를 드래그하면 크기를 직접 조절할 수 있습니다. CSS의 height, width 속성을 사용하면 더욱 정밀하게 크기를 제어할 수도 있습니다.