HTML의 screen.height 속성은 사용자 화면(디스플레이)의 전체 높이를 픽셀(px) 단위로 반환합니다. 이 속성은 읽기 전용(read-only)이며, 브라우저 창의 크기가 아니라 사용자 모니터 자체의 해상도 높이를 기준으로 한다는 점이 특징입니다. 반응형 웹 디자인이나 화면 크기에 따른 조건 분기를 처리할 때 유용하게 활용할 수 있습니다.
구문
다음은 screen.height 속성의 기본 구문입니다.
screen.height
예제
HTML Screen height 속성을 실제로 활용한 예제를 살펴보겠습니다. 아래 코드에서는 버튼을 클릭하면 사용자 화면의 총 높이가 화면에 표시되도록 구현했습니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
margin: 1rem auto;
font-weight: bold;
font-family: sans-serif;
}
</style>
<body>
<h1>HTML screen height Property</h1>
<button class="btn" onclick="get()">Show Screen Height</button>
<div class="show"></div>
<script>
function get() {
document.querySelector(".show").innerHTML = "Total height is " + screen.height + "px";
}
</script>
</body>
</html>
실행 결과
위 예제를 실행한 후 "Show Screen Height" 버튼을 클릭하면, 사용자 화면의 전체 높이가 다음과 같이 픽셀 값으로 출력됩니다.
참고 사항
screen.height와 함께 자주 사용되는 관련 속성으로는 screen.width(화면 너비), screen.availHeight(작업 표시줄 등을 제외한 사용 가능한 높이), window.innerHeight(브라우저 뷰포트 높이) 등이 있습니다. 용도에 맞게 적절한 속성을 선택해 사용하는 것이 중요합니다.