[Javascript] 자바스크립트 브라우저 객체 모델 - Screen 객체

브라우저 객체 모델(BOM)이란?

• 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 제어할 수 있는데, 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)이다.
• 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아니지만, 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체(global object)로 사용할 수 있다.

 

Screen 객체란?

• screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체다.

 

Screen 메소드

사용자의 화면 크기

• screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 반환한다.
• screen.width와 screen.height는 현재 사용자의 모니터 화면의 크기를 반환하지만 window.outerWidth와 window.outerHeight는 현재 브라우저 창의 크기를 반환한다.

document.write("현재 사용자의 디스플레이 화면의 너비는 " + screen.width + "픽셀");
document.write("현재 사용자의 디스플레이 화면의 높이는 " + screen.height + "픽셀");

document.write("현재 브라우저 창의 너비는 " + window.outerWidth + "픽셀");
document.write("현재 브라우저 창의 높이는 " + window.outerHeight + "픽셀");

실제 사용할 수 있는 화면 크기

• screen 객체의 availWidth와 availHeight 프로퍼티는 실제 사용할 수 있는 화면의 크기를 픽셀 단위로 반환하며, 이 프로퍼티는 운영체제의 작업 표시줄과 같은 공간을 모두 제외한 크기를 반환한다.

document.write("실제 사용할 수 있는 화면의 너비는 " + screen.availWidth + "픽셀");
document.write("실제 사용할 수 있는 화면의 높이는 " + screen.availHeight + "픽셀");

한 색상당 사용할 수 있는 비트수

• screen 객체의 colorDepth 프로퍼티는 사용자 화면에서 한 색상당 사용할 수 있는 비트 수를 반환한다.
• 대부분의 컴퓨터는 24비트의 트루 컬러(true colors)나 30/36/48비트의 디프 컬러(deep colors)를 사용하며, 트루 컬러에서 한 색상당 사용할 수 있는 비트 수는 224 = 16,777,216 다.

var bitColorDepth = screen.colorDepth;

document.write("사용자 화면에서 한 색상당 사용할 수 있는 비트수 " + bitColorDepth);
document.write("즉 한 색상은 총 " + Math.pow(2, bitColorDepth) + "가지로 표현");

화면 픽셀당 표시할 수 있는 비트수

• screen 객체의 pixelDepth 프로퍼티는 사용자 화면에서 픽셀당 표시할 수 있는 비트 수를 반환하며, 대부분의 컴퓨터에서 colorDepth와 pixelDepth는 같은 값을 가진다.

var bitPixelDepth = screen.pixelDepth;

document.write("사용자 화면의 한 픽셀당 표시할 수 있는 비트수는 " + bitPixelDepth);

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/