HTML Screen pixelDepth 속성 – 화면 색상 해상도 확인 방법

HTML의 screen.pixelDepth 속성은 웹 페이지를 방문한 사용자 화면의 색상 해상도(color resolution)를 반환합니다. 이 값은 픽셀 하나를 표현하는 데 사용되는 비트 수(bits per pixel)를 의미하며, 일반적인 24비트 컬러 환경에서는 24가 출력됩니다.

문법(Syntax)

pixelDepth 속성의 기본 문법은 다음과 같습니다.

screen.pixelDepth

예제 코드

다음은 HTML Screen pixelDepth 속성을 활용한 전체 예제입니다.

<!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 pixelDepth Property</h1>
<button class="btn" onclick="get()">Show pixel depth</button>
<div class="show"></div>
<script>
    function get() {
        document.querySelector(".show").innerHTML = "Color Resolution is " + screen.pixelDepth + " bits per pixel";
    }
</script>
</body>
</html>

실행 결과

HTML Screen pixelDepth 속성 – 화면 색상 해상도 확인 방법

화면에 있는 "Show pixel depth"(픽셀 깊이 표시) 버튼을 클릭하면 아래와 같이 방문자 화면의 색상 해상도가 표시됩니다.

HTML Screen pixelDepth 속성 – 화면 색상 해상도 확인 방법

참고 사항

대부분의 최신 브라우저에서는 colorDepth 속성과 동일한 값을 반환합니다.
Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 지원됩니다.
읽기 전용(read-only) 속성이므로 스크립트로 값을 직접 변경할 수 없습니다.