[TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Screen 객체
2023. 4. 25. 14:17
screen 객체는 사용자의 디스플레이 화면에 대한 다양한 정보를 저장하는 객체이다.
사용자의 화면 크기
screen 객체의 width와 height 프로퍼티는 사용자의 디스플레이 화면의 크기를 픽셀 단위로 변환한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>screen.width, screen.height</title>
</head>
<body>
<h1>사용자의 화면 크기</h1>
<script>
document.write('현재 사용자의 디스플레이 화면의 너비는 ' + screen.width + '픽셀입니다.<br>');
document.write('현재 사용자의 디스플레이 화면의 높이는 ' + screen.height + '픽셀입니다.<br>');
document.write('현재 브라우저 창의 너비는 ' + window.outerWidth + '픽셀입니다.<br>');
document.write('현재 브라우저 창의 높이는 ' + window.outerHeight + '픽셀입니다.<br>');
</script>
</body>
</html>
실제 사용할 수 있는 화면의 크기
screen 객체의 availWidth와 availHeight 프로퍼티는 실제 사용할 수 있는 화면의 크기를 픽셀 단위로 반환한다.
이 프로퍼티는 운영체제의 작업 표시줄과 같은 공간을 모두 제외한 크기를 반환한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>screen.availWidth, screen.availHeight</title>
</head>
<body>
<h1>실제 사용할 수 있는 화면 크기</h1>
<script>
document.write('실제 사용할 수 있는 화면의 너비는 ' + screen.availWidth + '픽셀입니다.<br>');
document.write('실제 사용할 수 있는 화면의 높이는 ' + screen.availHeight + '픽셀입니다.');
</script>
</body>
</html>
한 색상당 사용할 수 있는 비트 수
screen 객체의 colorDepth 프로퍼티는 사용자 화면에서 한 색상당 사용할 수 있는 비트 수를 반환한다.
대부분의 컴퓨터는 24비트의 트루 컬러나 30/36/48비트의 딥 컬러를 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>screen.colorDepth</title>
</head>
<body>
<h1>한 색상당 사용할 수 있는 비트수</h1>
<script>
var bitColorDepth = screen.colorDepth;
document.write('사용자 화면에서 한 색상당 사용할 수 있는 비트 수는 ' + bitColorDepth + '개입니다.<br>');
document.write('즉, 한 색상은 총 ' + Math.pow(2, bitColorDepth) + '가지로 표현됩니다.');
</script>
</body>
</html>
화면 픽셀당 표시할 수 있는 비트 수
screen 객체의 pixelDepth 프로퍼티는 사용자 화면에서 픽셀당 표시할 수 있는 비트 수를 반환한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>screen.pixelDepth</title>
</head>
<body>
<h1>화면 픽셀당 표시할 수 있는 비트수</h1>
<script>
var bitPixelDepth = screen.pixelDepth
document.write('사용자 화면의 한 픽셀당 표시할 수 있는 비트 수는 ' + bitPixelDepth + '개입니다.');
</script>
</body>
</html>
대부분의 컴퓨터에서 colorDepth와 pixelDepth는 같은 값을 갖는다.
TCP School의 강의 내용을 정리한 포스트입니다.
http://www.tcpschool.com/javascript/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'공부 > JavaScript' 카테고리의 다른 글
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - 대화 상자 (0) | 2023.04.25 |
|---|---|
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Navigator 객체 (0) | 2023.04.25 |
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - History 객체 (0) | 2023.04.25 |
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Location 객체 (0) | 2023.04.25 |
| [TCP School/자바스크립트] 브라우저 객체 모델(BOM) - Window 객체 (0) | 2023.04.25 |
