JavaScript로 화면 너비와 높이 구하는 방법 총정리

JavaScript는 사용자의 화면(모니터)에 대한 정보를 담고 있는 window.screen 객체를 기본적으로 제공합니다. 이 객체에는 화면의 높이와 너비뿐만 아니라 색상 깊이(color depth), 픽셀 밀도(pixel depth) 등 다양한 정보가 포함되어 있습니다.

화면의 높이와 너비를 확인하려면 JavaScript에서 제공하는 screen.height와 screen.width 속성을 각각 사용하면 됩니다.

화면 높이 구하기 – 문법(Syntax)

screen.height;

화면 너비 구하기 – 문법(Syntax)

screen.width;

예제 1: 화면 너비 출력하기

다음 예제에서는 screen.width 속성을 사용하여 현재 화면의 너비를 화면에 표시합니다.

<html>
<body>
<p id="width"> </p>
    <script>
        document.getElementById("width").innerHTML =
        "Screen width is " + screen.width;
    </script>
</body>
</html>

실행 결과

예제 2: 화면 높이 출력하기

다음 예제에서는 screen.height 속성을 사용하여 현재 화면의 높이를 화면에 표시합니다.

<html>
<body>
    <p id="height"> </p>
    <script>
        document.getElementById("height").innerHTML =
        "Screen height is " + screen.height;
    </script>
</body>
</html>

실행 결과

참고: 작업 표시줄을 제외한 실제 사용 가능 영역 구하기

브라우저나 운영체제의 작업 표시줄 등을 제외한 실제 사용 가능한 화면 크기를 알고 싶다면 screen.availWidth와 screen.availHeight 속성을 사용할 수 있습니다. 반응형 웹 디자인이나 팝업 창 위치 계산 등에 유용하게 활용됩니다.

console.log(screen.availWidth);   // 사용 가능한 너비
console.log(screen.availHeight);  // 사용 가능한 높이