자바스크립트 Screen 객체란?
자바스크립트에서 window.screen 속성은 현재 창(window)과 연결된 화면(screen) 객체에 대한 참조를 반환합니다.
Screen 인터페이스를 구현하는 screen 객체는 현재 창이 렌더링되고 있는 화면의 정보를 확인하기 위한 특수한 객체입니다. 이 객체가 제공하는 다양한 속성을 활용하면 사용자(클라이언트) 화면의 크기, 색상 깊이, 방향 등 여러 정보를 읽어오거나 일부 속성을 설정할 수 있습니다.
Screen 객체의 주요 속성
- Screen.availTop — 영구적 또는 준영구적인 운영체제 UI 요소(예: 작업 표시줄)에 할당되지 않은 첫 번째 픽셀의 y좌표를 반환합니다.
- Screen.availLeft — 화면 왼쪽에서부터 실제로 사용할 수 있는 첫 번째 픽셀의 위치를 반환합니다.
- Screen.availHeight — Windows 작업 표시줄처럼 운영체제가 상시 표시하는 UI 영역을 제외한 화면의 실질적인 높이(픽셀 단위)를 반환합니다.
- Screen.availWidth — 창에서 실제로 사용할 수 있는 수평 공간의 크기(픽셀 단위)를 반환합니다.
- Screen.colorDepth — 화면의 색상 깊이(color depth)를 비트 단위로 반환합니다.
- Screen.height — 화면의 전체 높이를 픽셀 단위로 반환합니다.
- Screen.left — 기본(주) 화면의 왼쪽 가장자리에서 현재 화면의 왼쪽 가장자리까지의 거리를 픽셀 단위로 반환합니다.
- Screen.orientation — 현재 화면과 연관된 ScreenOrientation 인스턴스를 반환하며, 화면의 방향(가로/세로) 정보를 확인할 수 있습니다.
- Screen.pixelDepth — 화면의 비트 깊이(bit depth)를 반환합니다.
- Screen.top — 현재 화면의 위쪽 가장자리로부터의 거리를 픽셀 단위로 반환합니다.
- Screen.width — 화면의 전체 너비를 픽셀 단위로 반환합니다.
간단한 사용 예시
아래와 같이 window.screen 객체를 통해 사용자 화면 정보를 손쉽게 확인할 수 있습니다.
console.log(window.screen.width); // 화면 전체 너비console.log(window.screen.height); // 화면 전체 높이console.log(window.screen.availWidth); // 작업 표시줄 등을 제외한 사용 가능한 너비console.log(window.screen.colorDepth); // 색상 깊이 (예: 24)정리
Screen 객체는 반응형 웹 디자인, 멀티 모니터 환경 감지, 화면 방향에 따른 레이아웃 조정 등 다양한 상황에서 유용하게 활용됩니다. 특히 availWidth / availHeight는 실제 콘텐츠가 표시될 수 있는 영역을 알려주므로, 브라우저 창 배치나 팝업 크기를 계산할 때 유용하게 사용할 수 있습니다.