HTML Window outerWidth 속성은 브라우저 창의 전체 너비를 픽셀(px) 단위로 반환합니다. 이 값에는 탭 표시줄, 주소창, 사이드바 등 브라우저의 모든 인터페이스 요소가 포함됩니다. 반면 콘텐츠 영역만의 너비가 필요하다면 innerWidth 속성을 사용하면 됩니다.
문법(Syntax)
outerWidth 속성의 기본 문법은 다음과 같습니다.
window.outerWidth
이 속성은 읽기 전용이며, 별도의 매개변수 없이 호출하는 것만으로 현재 브라우저 창의 전체 너비 값을 얻을 수 있습니다.
예제
버튼을 클릭하면 브라우저 창의 전체 너비를 화면에 표시하는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #8BC6EC;
background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>HTML Window outerWidth 속성</h1>
<button onclick="display()" class="btn">브라우저 창 너비 보기</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = '브라우저 창 너비: ' + window.outerWidth + "px";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
“브라우저 창 너비 보기” 버튼을 클릭하면 인터페이스 요소를 포함한 브라우저 창의 전체 너비가 픽셀 단위로 표시됩니다.
정리
outerWidth 속성은 반응형 웹 개발이나 팝업 창 크기를 다룰 때 유용하게 활용할 수 있습니다. 브라우저 UI를 제외한 실제 콘텐츠 영역의 너비가 필요한 경우에는 window.innerWidth를 사용한다는 점을 기억해 두세요.