[Javascript] 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보자

window.screen.width, window.screen.height, window.outerWidth, window.outerHeight, window.innerWidth, window.innerHeight, document.documentElement.clientWidth, document.documentElement.clientHeight 

이러한 속성들은 모두 창의 크기를 나타내지만, 반환하는 값이 서로 다르므로 사용하는 상황에 따라 적합한 속성을 선택해야 합니다.

반응형 웹 페이지를 구현할 때, 브라우저 창의 크기에 따라 다른 레이아웃을 적용해야 하거나 스크롤 이벤트와 함께 화면에 보이는 영역에 따라 다른 기능을 구현할 때 알아야 할 주요한 속성들입니다. 어떻게 다른지 알아봅시다.

 

window.screen.width, window.screen.height

화면의 전체 너비와 높이를 픽셀 단위로 반환합니다.

 

디바이스 스크린 사이즈

 

 

window.outerWidth, window.outerHeight

전체 브라우저 창의 너비와 높이를 픽셀 단위로 반환합니다. 주소 표시줄, 스크롤바, 툴바 등의 UI 요소까지 포함합니다.

 

브라우저 사이즈

 

 

window.innerWidth, window.innerHeight

브라우저 창의 너비와 높이를 픽셀 단위로 반환합니다. 주소 표시줄, 스크롤바, 툴바 등의 UI 요소는 제외합니다.

 

브라우저 사이즈 - 주소표시줄, 스크롤바, 툴바 제외

 

 

document.documentElement.clientWidth, document.documentElement.clientHeight

HTML 요소의 너비와 높이를 픽셀 단위로 반환합니다. 스크롤바는 포함하지 않지만, 패딩, 테두리, 마진 등의 CSS 속성은 포함합니다.

 

 

HTML 문서 사이즈

 

 

 

 

이렇게 브라우저 창 크기를 측정하는 주요 속성들에 대해서 알아보았습니다.

 

 

 

[Javascript] 다양한 방법으로 요소의 높이값 구하기, clientHeight, offsetHeight, scrollHeight, getBoundingClientRe

 

[npm] npm 버전 확인, 초기화, 설치 및 옵션, 삭제 등 기본 사용법

 

[firebase] 구글 Firebase로 무료 웹호스팅하는 방법에 대해서 알아보자

 

[HTML] 반응형으로 이미지맵 생성하는 방법