Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript screen.availWidth 속성 완벽 정리 – 사용자 화면의 실제 사용 가능한 너비 구하기

JavaScript에서 screen.availWidth 속성은 사용자 화면(screen)의 사용 가능한 너비를 픽셀(pixel) 단위로 반환합니다.

일반적인 화면 전체 크기를 나타내는 screen.width와 달리, screen.availWidth는 운영체제가 차지하는 영역인 작업 표시줄(Taskbar)을 제외한 값을 반환한다는 점이 핵심 특징입니다.

주요 특징

  • 반환값의 단위는 픽셀(px)입니다.
  • Windows의 작업 표시줄처럼 화면에 상시 표시되는 시스템 UI 영역은 포함되지 않습니다.
  • 브라우저 창의 크기가 아니라 모니터(디스플레이) 기준의 값입니다.
  • 팝업 창이나 브라우저 창을 배치할 때 유용하게 활용할 수 있습니다.

사용 예제

다음 코드를 실행하면 screen.availWidth 속성을 사용하여 사용자 화면의 사용 가능한 너비를 확인할 수 있습니다.

<!DOCTYPE html>
<html>
   <body>
      <script>
         document.write("사용자 화면의 사용 가능한 너비: " + screen.availWidth);
      </script>
   </body>
</html>

실행 결과 예시

사용자 화면의 사용 가능한 너비: 1920

위 결과는 1920×1080 해상도의 모니터에서 작업 표시줄이 하단에 위치한 경우의 출력 예입니다. 만약 작업 표시줄이 좌우 측면에 세로로 배치되어 있다면, 그만큼 너비가 줄어든 값이 반환됩니다.

관련 속성

화면 정보를 다룰 때 함께 알아두면 좋은 속성들은 다음과 같습니다.

  • screen.availHeight: 작업 표시줄을 제외한 화면의 사용 가능한 높이
  • screen.width: 화면의 전체 너비
  • screen.height: 화면의 전체 높이