JavaScript Window, Document의 Size와 관련된 API에 대해 알아보기

window객체는 browser에서 기본적으로 제공하는 것중 하나이다. 그 중 Size(width, height)와 관련된 API를 알아보려 한다.

---

# window.screen : 모니터 사이즈 (해상도)

let screenWidth = window.screen.width;
let screenHeight = window.screen.height;

스크린(모니터)의 해상도를 나타내기 때문에 헤상도를 바꾸기 전까지 값에 변화가 없다.

 

window.screen

---

# window.outer : 브라우저 사이즈 (탭, URL입력창 영역 등 포함) 

let browserWidth = window.outerWidth;
let browserHeight = window.outerHeight;

웹브라우저 창의 width와 height값을 가져올 수 있다. 브라우저의 탭, url입력창 등을 모두 포함한다.

---

# widnow.inner : 브라우저 콘텐츠 영역 (스크롤바 '포함')

let browserContentWidth = window.innerWidth;
let browserContentHeight = window.innerHeight;

웹브라우저 창의 콘텐츠 영역의 width와 height값을 구할 수 있다. 브라우저의 탭, URL입력창은 제외하되, 스크롤바는 포함한다.

---

# document.documentElement.clientWidth : HTML Document 영역 (스크롤바 '제외')

let documentWidth = document.documentElement.clientWidth;
let documentHeight = document.documentElement.clientHeight;

HTML document의 width와 height값을 구할 수 있다. 스크롤바 사이즈를 제외한 값을 구한다.

---

ㅇJavaScript Window, Document의 Size와 관련된 API 정리

위 4가지만 잘 활용하면 사이즈와 관련된 이벤트를 만드는데는 무리가 없을 것 같다.

---

잘 이해했다. 행동하자.

JavaScript Window, Document의 Size와 관련된 API에 대해 알아보기

*엘리의 드림코딩 영상을 보며 이해한 내용을 정리하며 글로 옮겼다.