Screen 객체

Screen 객체

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

---

사용자의 화면 크기

screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 반환

예제

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

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

코딩연습 ▶

screen.width와 screen.height > 현재 사용자의 모니터 화면의 크기를 반환
window.outerWidth와 window.outerHeight > 현재 브라우저 창의 크기를 반환

---

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

screen 객체의 availWidth와 availHeight 프로퍼티는 실제 사용할 수 있는 화면의 크기를 픽셀 단위로 반환

이 프로퍼티는 운영체제의 작업 표시줄과 같은 공간을 모두 제외한 크기를 반환

 

예제

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

코딩연습 ▶

---

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

screen 객체의 colorDepth 프로퍼티는 사용자 화면에서 한 색상당 사용할 수 있는 비트 수를 반환

대부분의 컴퓨터는 24비트의 트루 컬러(true colors)나 30/36/48비트의 디프 컬러(deep colors)를 사용

 

예제

var bitColorDepth = screen.colorDepth;
document.write("사용자 화면에서 한 색상당 사용할 수 있는 비트수는 " + bitColorDepth + "개입니다.<br>");
document.write("즉, 한 색상은 총 " + Math.pow(2, bitColorDepth) + "가지로 표현됩니다.");

/*
사용자 화면에서 한 색상당 사용할 수 있는 비트수는 24개입니다.
즉, 한 색상은 총 16777216가지로 표현됩니다.
*/

코딩연습 ▶

트루 컬러에서 한 색상당 사용할 수 있는 비트 수는 224 = 16,777,216 입니다.

---

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

screen 객체의 pixelDepth 프로퍼티는 사용자 화면에서 픽셀당 표시할 수 있는 비트 수를 반환

예제

var bitPixelDepth = screen.pixelDepth;
document.write("사용자 화면의 한 픽셀당 표시할 수 있는 비트수는 " + bitPixelDepth + "개입니다.<br>");
/*
사용자 화면의 한 픽셀당 표시할 수 있는 비트수는 24개입니다.
*/

코딩연습 ▶

대부분의 컴퓨터에서 colorDepth와 pixelDepth는 같은 값

---

참고

http://www.tcpschool.com/javascript/js_bom_screen

코딩교육 티씨피스쿨