window.screen 객체란?
JavaScript에서 window.screen 객체는 사용자의 화면(스크린)에 대한 정보를 가져올 때 사용됩니다. 이 객체를 활용하면 화면의 전체 크기는 물론, 작업 표시줄과 같은 시스템 UI를 제외한 실제 사용 가능한 영역까지 확인할 수 있어 반응형 웹 개발이나 화면 크기 기반 로직을 구현할 때 유용합니다.
window.screen 객체의 주요 속성
- screen.width – 화면의 전체 너비
- screen.height – 화면의 전체 높이
- screen.availWidth – 작업 표시줄과 같은 시스템 요소를 제외한 사용 가능한 화면 너비
- screen.availHeight – 작업 표시줄과 같은 시스템 요소를 제외한 사용 가능한 화면 높이
이 외에도 screen.colorDepth(색상 표현 비트 수)와 screen.pixelDepth(픽셀당 비트 수) 같은 속성도 제공되므로, 필요에 따라 함께 활용하면 더욱 정밀한 화면 정보를 얻을 수 있습니다.
예제 코드
다음 코드를 실행하면 JavaScript에서 window.screen 객체를 사용해 화면 정보를 출력하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script>
document.write("화면 너비: " + screen.width);
document.write("<br>화면 높이: " + screen.height);
document.write("<br>사용 가능한 화면 너비: " + screen.availWidth);
document.write("<br>사용 가능한 화면 높이: " + screen.availHeight);
</script>
</body>
</html>정리
window.screen 객체의 width와 height는 모니터의 물리적 전체 크기를 나타내고, availWidth와 availHeight는 운영체제의 작업 표시줄 등이 차지하는 공간을 제외한 값입니다. 두 값의 차이를 이해하면 브라우저 창 크기 계산이나 전체 화면 콘텐츠 배치 시 발생할 수 있는 오류를 예방할 수 있습니다.