HTML에서 window.innerWidth 속성은 브라우저 창의 콘텐츠 영역(뷰포트) 너비를 픽셀(px) 단위로 반환하는 속성입니다. 스크롤바가 포함된 값이 반환되며, 읽기 전용(read-only)이므로 값을 직접 변경할 수는 없습니다.
문법(Syntax)
사용 방법은 다음과 같습니다.
window.innerWidth
반환되는 값은 정수형 픽셀 값으로, 예를 들어 브라우저 창의 콘텐츠 영역 너비가 1200px라면 1200을 반환합니다.
예제(Example)
버튼을 클릭하면 현재 브라우저 창의 내부 너비를 화면에 표시하는 예제입니다.
<!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 innerWidth Property</h1>
<button onclick="display()" class="btn">Show window inner width</button>
<div class="show"></div>
<script>
function display() {
document.querySelector('.show').innerHTML = 'Window inner width is: ' + window.innerWidth + "px";
}
</script>
</body>
</html>실행 결과(Output)
페이지를 실행하면 다음과 같은 화면이 나타납니다.
여기서 [Show window inner width] 버튼을 클릭하면 아래와 같이 현재 브라우저 창 콘텐츠 영역의 너비가 픽셀 단위로 표시됩니다.
함께 알아두면 좋은 관련 속성
- window.innerHeight: 브라우저 창 콘텐츠 영역의 높이를 픽셀 단위로 반환합니다.
- window.outerWidth / window.outerHeight: 브라우저 전체 창(툴바, 스크롤바 등 UI 포함)의 외부 크기를 반환합니다.
- document.documentElement.clientWidth: 스크롤바를 제외한 실제 뷰포트 너비가 필요할 때 사용합니다.
window.innerWidth는 반응형 웹 디자인에서 자바스크립트로 화면 크기에 따라 레이아웃을 조정할 때 매우 유용하게 활용되며, 창 크기가 변경될 때마다 값을 갱신하려면 resize 이벤트와 함께 사용하는 것이 좋습니다.