TIL - Browser size

khg04170·2021년 7월 14일
0

TIL

목록 보기
2/8
post-thumbnail

☄️ 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

profile
Hello all 👋🏻 📍London

0개의 댓글