[DOM] JavaScript로 화면 및 웹 브라우저 크기 가져오기

화면 크기 가져오기

JavaScript를 사용하면 화면의 가로와 세로 크기를 가져올 수 있습니다.

아래 코드를 통해 화면의 가로와 세로 크기를 출력합니다.

// 화면의 가로 크기
let screenWidth = screen.width;
// 화면의 세로 크기
let screenHeight = screen.height;

웹 브라우저 크기 가져오기

웹 브라우저의 가로와 세로 크기를 가져오려면 window.innerWidth 와  window.innerHeight 를 사용합니다. 이를 통해 웹페이지 내에서 웹 브라우조 화면을 크기를 확인할 수 있습니다.

// 웹 브라우저의 가로 크기
let browserWidth = window.innerWidth;
// 웹 브라우저의 세로 크기
let browserHeight = window.innerHeight;

HTML 페이지 크기 가져오기

마지막으로 HTML 문서의 가로와 세로 크기를 가져오려면 

document.documentElement.scrollWidth 와

document.documentElement.scrillHeight를 사용합니다.

// HTML 문서의 가로 크기
let pageWidth = document.documentElement.scrollWidth;
// HTML 문서의 세로 크기
let pageHeight = document.documentElement.scrollHeight;

이렇게 얻은 정보를 활용하면 웹페이지가 동적으로 변하는 상황에서 화면 및 웹 브라우저 크기를 고려한 레이아웃을 구성할 수 있습니다.