☄️ Browser
📍 window, document, navigator
👉 window
- 브라우저에 현재 열려있는 전체 창 obj
👉document
- window안에 페이지가 표기되는 부분. 우리가 html에서 작성요소가 표기되어 지는 부분.
👉 navigator
- 눈에 보이지 않는 부분으로 전체적 윈도우, 브라우저와 관련된 정보들이 담겨있는 obj이다.
📍size
👉 window.screen
- 브라우저 바깥을 포함한 전체 스크린, 모니터 사이즈
👉 window.outer
- 브라우저 전체 + 스크롤바 영역 포함 + url탭 사이즈를 포함한 전체 사이즈
👉 window.inner
- 브라우저 전체. + 스크롤바 영역 포함 사이즈. 웹페이지에 있는 수직 스크롤바 영역 전체를 합한 사이즈
👉 documentElement.clientWidth
- 순수 document사이즈 + 스크롤바 미포함. 문서자체로 수직스크롤바 영역 제외한 사이즈
window 객체가 아닌 document.documentElement를 쓰는 이유?
=>>
window.innerWidth/innerHeight는 스크롤바가 차지하는 영역을 포함해 값을 계산합니다. 스크롤바가 있는 경우 스크롤 바 역시 공간을 차지하는데, 이럴 때 window객체와 document.documentElement의 해당 프로퍼티들은 다른 값을 반환합니다.
📍실습
<!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>
<style>
.tag {
background-color: powderblue;
width: 1000px;
height: 500px;
font-size: 40px;
}
</style>
<body>
<div class="tag">window size</div>
<script>
const tag = document.querySelector(".tag");
function updateTag() {
tag.innerHTML = `screen size: ${screen.width}, ${screen.height} <br/>
window outer: ${window.outerHeight}, ${window.outerWidth} <br/>
window inner: ${window.innerHeight}, ${window.innerWidth} <br/>
document : ${document.documentElement.clientHeight}, ${document.documentElement.clientWidth}`;
}
window.addEventListener("resize", () => {
updateTag();
});
updateTag();
</script>
</body>
</html>
참고자료
브라우저 창 사이즈와 스크롤 https://ko.javascript.info/size-and-scroll-window
mdn Document.documentElement https://developer.mozilla.org/ko/docs/Web/API/Document/documentElement
드림코딩 프론트엔드 필수 브라우저 101
Hello all 👋🏻 📍London