CSS의 height 속성은 박스(box) 모델에서 요소의 높이를 지정할 때 사용합니다. 이 속성에 지정할 수 있는 값은 다음과 같습니다.
- 길이 값(length): px, em, rem 등 절대·상대 단위
- 백분율(percentage): 부모 요소 높이를 기준으로 한 % 값
- auto 키워드: 콘텐츠 크기에 따라 브라우저가 자동으로 계산 (기본값)
예제
다음 코드를 실행하면 문단 요소의 너비와 높이가 지정된 모습을 직접 확인할 수 있습니다.
<html> <head> </head> <body> <p style = "width:200px; height:50px; border:2px solid green; padding:15px; margin:20px;"> 이 문단은 너비 200픽셀, 높이 50픽셀로 지정되어 있습니다 </p> </body> </html>
위 예제에서는 height:50px로 문단의 높이를 고정했습니다. 초록색 테두리 안쪽 영역의 세로 크기가 정확히 50픽셀로 유지되는 것을 확인할 수 있습니다.
참고: 관련 속성
높이 조절과 함께 자주 사용되는 속성도 알아두면 유용합니다.
min-height: 요소가 가질 수 있는 최소 높이 지정max-height: 요소가 가질 수 있는 최대 높이 지정line-height: 텍스트 줄의 높이(행간) 지정
콘텐츠 양이 변동될 가능성이 있다면 고정 높이 대신 min-height나 auto 값을 활용하는 것이 레이아웃이 깨지는 것을 방지하는 좋은 습관입니다.