HTML의 screen.availWidth 속성은 사용자 화면에서 실제로 콘텐츠를 표시할 수 있는 사용 가능한 너비(available width)를 픽셀 단위로 반환합니다. 이 값은 운영체제의 작업 표시줄(Windows 작업 표시줄 등)과 같은 시스템 인터페이스 요소가 차지하는 영역을 제외한 순수한 화면 공간을 의미합니다.
availWidth와 width의 차이
screen.width가 모니터의 전체 물리적 해상도를 반환한다면, screen.availWidth는 작업 표시줄처럼 항상 화면에 고정되어 있는 UI 영역을 제외한 값을 돌려줍니다. 따라서 전체 화면 팝업이나 대시보드처럼 화면 공간을 최대한 활용해야 하는 경우에 유용하게 사용됩니다.
문법(Syntax)
기본 문법은 다음과 같습니다.
screen.availWidth
- 반환값: 숫자(Number) 형식의 픽셀 값
- 읽기 전용: 값을 직접 변경할 수 없습니다.
예제 코드
버튼을 클릭하면 현재 화면의 사용 가능한 너비를 화면에 출력하는 예제입니다.
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background-color: #FBAB7E;
background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 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;
margin: 1rem auto;
font-weight: bold;
font-family: sans-serif;
}
</style>
<body>
<h1>HTML screen availWidth 속성</h1>
<button class="btn" onclick="get()">availWidth 값 확인하기</button>
<div class="show"></div>
<script>
function get() {
document.querySelector(".show").innerHTML = "사용 가능한 화면 너비: " + screen.availWidth + " px";
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 그라디언트 배경 위에 버튼이 표시됩니다. 이제 “availWidth 값 확인하기” 버튼을 클릭해 보세요.
버튼을 클릭하면 아래와 같이 현재 화면의 사용 가능한 너비가 픽셀(px) 단위로 출력되는 것을 확인할 수 있습니다.
함께 알아두면 좋은 관련 속성
- screen.availHeight: 작업 표시줄 등을 제외한 사용 가능한 화면 높이를 반환합니다.
- screen.width / screen.height: 운영체제 UI를 포함한 화면의 전체 너비와 높이를 반환합니다.
이처럼 availWidth 속성은 자바스크립트만으로 간단히 호출할 수 있으며, 별도의 매개변수나 설정 없이 즉시 사용할 수 있다는 장점이 있습니다.