브라우저 객체 모델(BOM) 이해하기: Screen 객체
웹 개발을 하면서 브라우저 객체 모델(Browser Object Model, BOM)의 여러 가지 객체를 활용하게 됩니다. 이번 글에서는 BOM의 중요한 구성 요소 중 하나인 Screen 객체에 대해 알아보겠습니다. Screen 객체는 웹 브라우저의 화면 정보를 제공하며 웹 페이지를 다양한 화면 크기와 해상도에 맞게 최적화하는 데 도움이 됩니다.
▼ 브라우저 객체 모델의 계층 구조
1. Screen 객체의 주요 속성
▼ Screen 객체의 주요 속성
| 속성 | 설명 |
|---|---|
| width | 화면의 너비(픽셀 단위)를 반환합니다. |
| height | 화면의 높이(픽셀 단위)를 반환합니다. |
| availWidth | 작업 표시줄이나 dock 등을 제외한 사용 가능한 화면 너비(픽셀 단위)를 반환합니다. |
| availHeight | 작업 표시줄이나 dock 등을 제외한 사용 가능한 화면 높이(픽셀 단위)를 반환합니다. |
| colorDepth | 화면의 색상 깊이(비트 단위)를 반환합니다. |
2. 예제 코드
1. 사용 예제 코드
// 화면 정보 출력
console.log("Screen width: " + screen.width + " pixels");
console.log("Screen height: " + screen.height + " pixels");
console.log("Available screen width: " + screen.availWidth + " pixels");
console.log("Available screen height: " + screen.availHeight + " pixels");
console.log("Screen color depth: " + screen.colorDepth + " bits");
2. 실행 결과 화면
3. 주의 사항 및 브라우저 호환성
Screen 객체는 모든 주요 브라우저에서 지원되며, 일반적으로 호환성 문제가 없습니다. 그러나 일부 브라우저 버전에 따라 지원되지 않는 속성이나 메서드가 있을 수 있으니 사용하기 전에 확인해야 합니다.
☞ 이 글에서는 BOM의 Screen 객체에 대해 간략하게 알아보았습니다. 다음 글에서는 BOM의 다른 객체인 Document 객체에 대해 알아볼 예정입니다.
자바스크립트 기초 이전 게시물
- 브라우저 객체 모델(BOM) 기본 개념 및 구성요소 알아보기
- window 객체: 알림(alert), 확인(confirm), 프롬프트(prompt) 사용 예제
- window 객체 타이머 관리: setTimeout과 setInterval 사용 예제
- window.open: POST 방식으로 웹 브라우저의 새 창 또는 탭 열기
- window 객체: 브라우저 창 크기와 위치 조절 사용 예제
- 브라우저 객체 모델(BOM) 이해하기: Location 객체
- 브라우저 객체 모델(BOM) 이해하기: History 객체
- 브라우저 객체 모델(BOM) 이해하기: Navigator 객체
이 글이 도움이 되셨다면 공유를 부탁 드립니다. 다음 글에서 뵙겠습니다!
