브라우저 객체 모델(Browser Object Model)
BOM은 웹 브라우저 전체를 객체로 관리하는 것을 말한다
자바스크립트로 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것(내장객체)을 의미한다
브라우저에서 자주 사용되는 내장 객체
- Window
- 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체
- Document
- 웹 문서에서 <body>태그를 만날 때 만들어지는 객체. HTML 문서 정보를 가지고 있다
- History
- 현재 창에서 사용자의 방문 기록을 저장하는 객체
- Location
- 현재 페이지에 대한 URL정보를 가지고 있는 객체
- Navigater
- 현재 사용 중인 웹 브라우저의 정보를 가지고 있는 객체
- Screen
- 현재 사용 중인 화면 정보를 다루는 객체
Window객체의 내장 함수(메소드)
1. open()
링크를 누르거나 웹 문서를 불러오자마자 자동으로 새 창이 뜨게 한다
open("링크","윈도우 이름지정", "너비,높이,위치 지정")
open("https://blog.naver.com/soimar", "", "left=0, top=0, width=300, height=300")
크롬 웹 브라우저가 기본으로 팝업을 차단하기 때문에 팝업 차단 상태인지 확인 필요
브라우저가 팝업을 차단시 open()은 'null'을 반환하게 된다!
반환값을 확인해서 팝업이 차단되었는지 알아낼 수 있다.
요즘은 모달창을 만들어 띄우는 방식이라 팝업 창 제작용도로는 사용되진 않지만, 가끔 사용할 상황이 생길 수 있다.
2. resizeBy() , resizeTo()
open()함수로 열린 알림 창의 크기를 조절할 때 사용
resizeBy() 현재 브라우저 창의 크기를 기준으로 너비, 높이에 값을 더한다
기존 창의 너비&높이 값 + 입력한 값을 더해서 브라우저 창의 크기를 새로 지정한다
음수 값 사용가능
resizeTo()는 최종 크기를 지정
음수 값 사용불가
3. moveBy(), moveTo()
열린 알림 창의 위치를 조절할 때 사용
x축, y축 값을 매개변수로 사용
moveBy()는 현재 위치를 기준으로 가로로 x픽셀만큼, 세로로 y픽셀만큼 옮긴다
moveTo()는 화면의 왼쪽 위 모서리를 기준으로 가로로 x픽셀만큼, 세로로 y픽셀만큼 옮긴다
Navigator객체
웹 브라우저와 관련된 정보를 담아둔 객체
현재 웹 문서에 접속한 사용자의 브라우저 정보를 확인하는 속성, 배터리 상태를 체크하는 속성 등이 있다
Navigator객체는 브라우저의 랜더링 엔진 이름을 보고 종류를 구별해준다
브라우저마다 내장 랜더링 엔진이 다르기 때문에 html, css의 적용에 차이가 생긴다
랜더링 엔진
브라우저가 문서를 화면에 표시하기 위해 문서의 태그,스타일을 해석하는 프로그램
레이아웃 엔진이라고도 한다
History객체
브라우저에서 사용자가 이동한 사이트 주소를 저장시킨 객체(주소 표시줄에 입력된 것을 저장)
보안상 읽기 전용으로만 제공한다
페이지 뒤로가기, 앞으로 가기 등을 할 수 있다
Location객체
현재 문서의 URL주소 정보를 가지고 있는 객체
URL주소 정보를 편집하면 현재 브라우저 창에 열릴 사이트나 문서를 지정할 수 있다
Screen객체
사용자의 화면(PC 모니터, 모바일 기기의 화면 자체) 크기나 정보를 알고 싶을 때 사용하는 객체
화면 관련 정보를 알아낼 때 많이 사용된다
Screen객체를 활용하면 화면 회전, 방향 등을 잠그거나 해제할 수 있다
'More than TIL > Web' 카테고리의 다른 글
| BOM, DOM, CCSOM, Javascript, 브라우저 랜더링 과정 (0) | 2022.09.02 |
|---|---|
| API테스트 Thunder Client (0) | 2022.08.02 |
| 인증/인가, JWT 디코딩 (0) | 2022.04.14 |
| UI 색상을 추천해주는 사이트(color tool) (0) | 2022.04.13 |
| 웹 서비스 HTTP통신 구조 (0) | 2022.04.13 |