JavaScript에서 screen.availHeight 속성은 사용자 화면의 사용 가능한 높이를 픽셀 단위로 반환합니다. 이 속성의 특징은 운영체제의 작업 표시줄(Taskbar)과 같은 인터페이스 요소가 차지하는 영역을 제외한 값이 반환된다는 점입니다. 즉, 실제로 웹 콘텐츠가 표시될 수 있는 유효한 화면 높이를 알려주는 것이죠.
screen.availHeight 속성의 특징
반환되는 값은 정수형 숫자이며, 단위는 픽셀(px)입니다. 일반적인 screen.height 속성과 달리 작업 표시줄 영역을 포함하지 않기 때문에, 브라우저 창 크기를 조정하거나 팝업 창을 배치할 때 유용하게 활용할 수 있습니다.
사용 예제
다음 코드를 실행하여 JavaScript에서 screen.availHeight 속성을 어떻게 사용하는지 확인해 보세요.
<!DOCTYPE html>
<html>
<body>
<script>
document.write("화면의 사용 가능한 높이: " + screen.availHeight);
</script>
</body>
</html>실행 결과 예시
위 코드를 실행하면 다음과 같은 형태로 결과가 출력됩니다.
화면의 사용 가능한 높이: 1040
예를 들어 전체 화면 높이가 1080픽셀이고 작업 표시줄이 하단에 40픽셀을 차지하고 있다면, availHeight는 1040을 반환합니다.
관련 속성
화면 정보를 다룰 때 함께 알아두면 좋은 속성들은 다음과 같습니다.
- screen.height: 작업 표시줄을 포함한 전체 화면 높이
- screen.availWidth: 작업 표시줄을 제외한 사용 가능한 화면 너비
- screen.width: 전체 화면 너비