브라우저 객체 모델(BOM)이란?
브라우저 객체 모델(Browser Object Model, BOM)은 자바스크립트가 웹 브라우저와 상호작용할 수 있도록 지원하는 속성과 메서드의 집합입니다. DOM(문서 객체 모델)이 웹 페이지의 콘텐츠를 다룬다면, BOM은 브라우저 창 자체를 제어하는 역할을 담당합니다.
BOM의 최상위 객체는 window 객체로, 브라우저 창의 크기(너비와 높이)를 확인하거나 새 창을 열고 닫는 등 다양한 기능을 제공합니다. 또한 window.screen 객체를 통해 사용자 모니터 화면의 너비와 높이 정보도 얻을 수 있습니다.
주요 BOM 객체
- window: 브라우저 창을 나타내며, 창 크기·스크롤·팝업 등을 제어합니다.
- screen: 사용자 화면의 너비, 높이, 색상 깊이 등의 정보를 제공합니다.
- location: 현재 페이지의 URL 정보를 읽거나 페이지 이동을 수행합니다.
- history: 브라우저의 방문 기록을 탐색할 수 있습니다.
- navigator: 브라우저 종류, 버전 등 브라우저 관련 정보를 제공합니다.
예제: 화면 너비와 높이 구하기
다음 코드를 실행하면 screen 객체를 사용해 사용자 화면의 너비와 높이를 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<body>
<script>
document.write("화면 너비: " + screen.width);
document.write("<br>화면 높이: " + screen.height);
</script>
</body>
</html>실행 결과는 다음과 같이 출력됩니다.
화면 너비: 1920 화면 높이: 1080
창 크기 확인하기
모니터 화면이 아닌 브라우저 창 자체의 크기를 알고 싶다면 window.innerWidth와 window.innerHeight를 사용하세요.
console.log("창 너비: " + window.innerWidth);
console.log("창 높이: " + window.innerHeight);정리
BOM은 자바스크립트가 브라우저 환경과 소통할 수 있게 해주는 필수 인터페이스입니다. window, screen, location, history, navigator 등의 객체를 활용하면 화면 크기 확인, URL 제어, 방문 기록 탐색 등 브라우저 관련 기능을 자유롭게 구현할 수 있습니다.