# window size
window.screen 모니터 사이즈
- screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 반환합니다.
window.outer 브라우저 전체 사이즈
- Window.outerWidth 는 브라우저 윈도우 바깥쪽의 폭을 얻어온다. 이것은 브라우저 윈도우의 사이드바와 가장자리 경계선을 포함한 폭을 나타내어 준다.
window.inner 브라우저 웹페이지 사이즈 (스크롤 바 포함 )
- 브라우저 윈도우의 뷰포트 너비로, 수직 스크롤바가 존재한다면 포함한다.
documentElement.client 브라우저 웹페이지 사이즈 ( 스크롤 바 제외 )
- Element.clientWidth 속성은 인라인 요소나 CSS 상에 존재하지 않는 요소에 대해서는 0을 나타내고, 그렇지 않다면 엘리먼트의 내부 너비를 픽셀로 나타낸다. 내부 너비는 안쪽 여백(패딩)을 포함하지만, 테두리, 바깥 여백(마진) 그리고 수직 스크롤바의 너비는 포함하지 않는다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="screen"></h1>
<h1 class="outer"></h1>
<h1 class="inner"></h1>
<h1 class="client"></h1>
<script src="./app.js"></script>
</body>
</html>JAVASCRIPT
<script>
const screen = document.querySelector(".screen");
const outer = document.querySelector(".outer");
const inner = document.querySelector(".inner");
const client = document.querySelector(".client");
// 페이지가 load 됐 때 screen , outer , inner , client를 먼저 보여준다.
function upDateTag () {
screen.innerText = `window.screen: ${window.screen.width},
${window.screen.height}`;
outer.innerText = `window.outer: ${window.outerWidth},
${window.outerHeight}`;
inner.innerText = `window.inner: ${window.innerWidth},
${window.innerHeight}`;
client.innerText = `documentElement.client.Width:
${document.documentElement.clientWidth},
${document.documentElement.clientHeight}`;
}
// 원도우 창이 resize 될 때 마다 upDateTag 함수 실행
window.addEventListener("resize",() => {
upDateTag();
});
// 가장먼저 upDateTag 함수를 실행
upDateTag();
</script>
Dreams don't run away It is always myself who runs away.