자바스크립트로 브라우저 화면 크기 확인: 실시간 리사이즈와 호환성 가이드

 

💻 자바스크립트로 브라우저 화면 크기를 확인하고 싶으신가요? window.innerWidth부터 실시간 리사이즈 이벤트까지, 초보자도 쉽게 따라 할 수 있는 가이드를 준비했어요!

목차

• 브라우저 화면 크기란?
• window 객체 속성 활용
• IE 하위 버전 호환성
• resize 이벤트로 실시간 크기 확인
• 실습 코드 예제
• 주의사항과 팁
• FAQ: 자주 묻는 질문
• 함께 보면 좋은 글

---

🖥️ 브라우저 화면 크기란?

브라우저 화면 크기는 웹 개발에서 반응형 디자인이나 UI 조정을 위해 필수적인 정보예요. 자바스크립트를 사용하면 window 객체의 속성과 이벤트를 통해 브라우저의 콘텐츠 영역(innerWidth/innerHeight)과 전체 창(outerWidth/outerHeight)을 쉽게 확인할 수 있습니다. 이 정보는 웹사이트 레이아웃 조정, 모바일 호환성 테스트 등에 유용하죠.

자세한 속성 설명은 W3Schools에서 확인하세요!

💡 팁: 화면 크기 확인은 반응형 웹 개발에서 필수! 개발자 도구(F12)로 먼저 테스트해보세요.

---

📏 window 객체 속성 활용

window 객체는 브라우저 창의 정보를 제공하며, 아래 속성을 통해 화면 크기를 확인할 수 있어요.

속성	설명	예시 값
window.innerWidth	콘텐츠 영역의 너비(스크롤바 제외)	1280px
window.innerHeight	콘텐츠 영역의 높이(스크롤바 제외)	720px
window.outerWidth	브라우저 전체 창의 너비(툴바, 스크롤바 포함)	1300px
window.outerHeight	브라우저 전체 창의 높이(툴바, 스크롤바 포함)	800px

이 속성들은 현대 브라우저(Chrome, Firefox, Edge)에서 잘 작동하며, IE 9 이상에서 지원됩니다.

console.log("콘텐츠 너비: " + window.innerWidth + "px");
console.log("전체 창 높이: " + window.outerHeight + "px");

💡 팁: innerWidth는 반응형 CSS 미디어 쿼리와 함께 사용하면 더욱 효과적이에요!

---

🌐 IE 하위 버전 호환성

Internet Explorer 8 이하에서는 window.innerWidth와 innerHeight를 지원하지 않아요. 대신 document.documentElement 또는 document.body의 속성을 사용해야 합니다.

• document.documentElement.clientWidth: 콘텐츠 너비
• document.documentElement.clientHeight: 콘텐츠 높이
• document.body.clientWidth: 대체 속성(일부 상황)
• document.body.clientHeight: 대체 속성(일부 상황)

function getBrowserSize() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    console.log("너비: " + width + "px, 높이: " + height + "px");
}
getBrowserSize();

위 코드는 모든 브라우저에서 호환되며, MDN Web Docs에서 더 자세한 정보를 확인할 수 있습니다.

💡 팁: IE 지원이 필요 없다면 최신 속성만 사용해 코드 간소화하세요!

---

🔄 resize 이벤트로 실시간 크기 확인

브라우저 창 크기가 변경될 때 실시간으로 크기를 확인하려면 resize 이벤트를 활용하세요. 아래는 주요 적용 방법입니다.

1. body 태그에 onresize 속성 추가

function displaySize() {
    document.getElementById("size").innerHTML = 
        "콘텐츠: " + window.innerWidth + "x" + window.innerHeight + "px";
}

2. document.body에 이벤트 연결

document.getElementsByTagName("BODY")[0].onresize = function() {
    console.log("크기 변경: " + window.innerWidth + "x" + window.innerHeight);
};

3. addEventListener 사용

addEventListener는 현대적인 방법으로, IE 9 이상에서 지원됩니다.

window.addEventListener("resize", function() {
    document.getElementById("size").innerHTML = 
        "콘텐츠: " + window.innerWidth + "x" + window.innerHeight + "px";
});

resize 이벤트는 창 크기 변경 시마다 호출되므로, 성능 최적화를 위해 디바운싱(debouncing)을 고려하세요.

💡 팁: W3Schools에서 resize 이벤트 예제를 확인해보세요!

---

🛠️ 실습 코드 예제

아래는 클릭 시 화면 크기를 표시하고, 실시간 리사이즈를 반영하는 완성된 예제입니다.

    브라우저 크기 확인
        #size { font-size: 18px; margin: 20px; }
        button { padding: 10px 20px; cursor: pointer; }
    브라우저 크기 확인콘텐츠 크기: 클릭하세요전체 창 크기: 클릭하세요크기 확인
        function displaySize() {
            var inner = window.innerWidth + "x" + window.innerHeight + "px";
            var outer = window.outerWidth + "x" + window.outerHeight + "px";
            document.getElementById("size").innerHTML = inner;
            document.getElementById("fullSize").innerHTML = outer;
        }
        window.addEventListener("resize", displaySize);
    

이 코드는 버튼 클릭 또는 창 크기 변경 시 크기를 실시간으로 표시하며, CodePen에서 테스트해볼 수 있어요.

💡 팁: 디바운싱을 추가하면 resize 이벤트의 성능을 최적화할 수 있어요!

---

⚠️ 주의사항과 팁

개발자들의 경험을 바탕으로 실용적인 팁을 정리했어요:

• 호환성 확인: IE 8 이하 지원 시 대체 속성 사용.
• 성능 최적화: resize 이벤트에 디바운싱 적용.
• 모바일 고려: 모바일 브라우저에서 주소 표시줄로 인해 innerHeight가 달라질 수 있음.
• 테스트 환경: 다양한 브라우저(Chrome, Firefox, Safari)에서 테스트.
• 대체 라이브러리: jQuery 사용 시 $(window).width()로 간단히 확인 가능.

💡 팁: Can I Use에서 브라우저 호환성을 확인하세요!

---

❓ FAQ: 자주 묻는 질문

innerWidth와 outerWidth의 차이는?

innerWidth는 콘텐츠 영역, outerWidth는 툴바와 스크롤바를 포함한 전체 창의 너비입니다.

IE 8에서 작동하지 않으면 어떻게 하나요?

document.documentElement.clientWidth 또는 document.body.clientWidth를 사용하세요.

resize 이벤트가 느리게 반응하나요?

디바운싱 함수를 추가해 이벤트 호출 빈도를 줄이세요.

모바일에서 정확한 높이를 얻으려면?

주소 표시줄을 고려해 window.visualViewport.height를 테스트해보세요.

---

🔗 함께 보면 좋은 글

2025.05.30 - [분류 전체보기] - 네이버 클로바노트 사용법: 잔여 시간 추가, 요금제, 대체 앱 완벽 가이드

네이버 클로바노트 사용법: 잔여 시간 추가, 요금제, 대체 앱 완벽 가이드

2025.06.13 - [분류 전체보기] - 결혼식 & 장례식 축의금·조의금 봉투 작성법과 구매처 완벽 가이드

결혼식 & 장례식 축의금·조의금 봉투 작성법과 구매처 완벽 가이드

2025.03.21 - [분류 전체보기] - Microsoft 365, 오피스 365 무료로 사용하는 5가지 최신 방법

Microsoft 365, 오피스 365 무료로 사용하는 5가지 최신 방법