HTML의 height 속성은 요소의 세로 크기를 픽셀(pixel) 단위로 선언하는 데 사용됩니다.
HTML5에서 달라진 점
참고: HTML5부터는 height 속성에 퍼센트(%) 단위로 높이를 지정하는 기능이 제거되었습니다. 따라서 현재는 픽셀 값만 사용할 수 있습니다.
height 속성을 지원하는 HTML 요소
다음과 같은 HTML 요소들이 height 속성을 가지고 있습니다.
- canvas
- embed
- iframe
- img
- input
- object
- video
예제: 비디오 요소의 height 속성 활용하기
아래 예제는 <video> 요소의 height 속성을 자바스크립트로 동적으로 조작하는 방법을 보여줍니다. 버튼을 클릭할 때마다 비디오의 높이가 50픽셀씩 증가합니다.
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Video height</title>
<style>
* {
padding: 2px;
margin:5px;
}
form {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-Video-height</legend>
<video id="wordPressIntro" width="320" height="50" controls><source src=" https://www.tutorialspoint.com/html5/foo.mp4" type="video/mp4"></video><br>
<input type="button" onclick="getTrackDetails()" value="Video Not Visible">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var wordPressIntro = document.getElementById("wordPressIntro");
function getTrackDetails() {
wordPressIntro.height += 50;
divDisplay.textContent = 'Video height: '+wordPressIntro.height;
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과를 확인할 수 있습니다.
1) 'Video Not Visible' 버튼 클릭 전
비디오 요소가 초기 height 값인 50픽셀로 표시됩니다.
2) 'Video Not Visible' 버튼을 3번 클릭한 후
버튼을 클릭할 때마다 height 속성값이 50씩 증가하므로, 3번 클릭 후에는 비디오 높이가 200픽셀이 되며 화면에 그 결과가 출력됩니다.
정리
height 속성은 canvas, iframe, img, video 등 미디어 및 임베드 관련 요소의 세로 크기를 픽셀 단위로 지정할 때 유용합니다. 또한 자바스크립트의 DOM 프로퍼티를 통해 런타임에 동적으로 변경할 수도 있으므로, 인터랙티브한 웹 페이지를 만들 때 적극적으로 활용해 보시기 바랍니다.