HTML DOM의 Style height 속성은 웹 페이지에서 특정 요소의 높이를 설정하거나 현재 설정된 높이 값을 가져올 때 사용됩니다. JavaScript를 통해 동적으로 요소의 크기를 조절해야 할 때 매우 유용하게 활용할 수 있습니다.
기본 문법
height 속성을 설정하는 기본 문법은 다음과 같습니다.
object.style.height = "auto|length|%|initial|inherit"
속성값 종류와 설명
height 속성에 사용할 수 있는 값은 아래 표와 같습니다.
| 값 | 설명 |
|---|---|
| auto | 기본값으로, 브라우저가 자동으로 계산한 높이가 적용됩니다. |
| length | px, em 등 길이 단위를 사용하여 요소의 높이를 지정합니다. |
| % | 부모 요소를 기준으로 한 상대적인 백분율(%)로 자식 요소의 높이를 설정합니다. |
| initial | 해당 속성을 초기 기본값으로 되돌립니다. |
| inherit | 부모 요소의 속성값을 상속받아 적용합니다. |
실습 예제
아래 예제는 버튼을 클릭하면 첫 번째 div 요소의 높이가 100px에서 200px로 늘어나는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
width:100px;
height:100px;
background-color:lightpink;
}
#demo2 {
margin-top:4px;
width:100px;
height:100px;
background-color:coral;
}
</style>
<script>
function changeHeight() {
document.getElementById("demo1").style.height="200px";
document.getElementById("Sample").innerHTML="첫 번째 div의 높이가 100px 증가했습니다";
}
</script>
</head>
<body>
<div id="demo1" >DIV1</div>
<div id="demo2" >DIV2</div>
<p>아래 버튼을 클릭하면 위 div 요소들의 높이가 변경됩니다</p>
<button onclick="changeHeight()">높이 변경</button>
<p id="Sample"></p>
</body>
</html>실행 결과
페이지를 처음 열면 두 개의 div 요소가 각각 100px 높이로 표시됩니다.
이후 “높이 변경(Change Height)” 버튼을 클릭하면 첫 번째 div(demo1)의 높이가 200px로 늘어나고, 그 결과 메시지가 화면에 출력됩니다.
정리
HTML DOM Style height 속성은 document.getElementById() 등으로 선택한 요소에 대해 .style.height 형태로 접근하여 높이를 동적으로 제어할 수 있습니다. 반응형 레이아웃, 애니메이션 효과, 사용자 인터랙션에 따른 UI 변경 등 다양한 상황에서 활용도가 높으므로 각 속성값의 차이를 잘 이해해 두는 것이 좋습니다.