HTML Screen colorDepth 속성 – 화면 색상 비트 깊이 확인하기

HTML의 Screen colorDepth 속성은 화면에 이미지를 표시할 때 사용되는 색상 팔레트의 비트 깊이(bit depth), 즉 픽셀당 비트 수(bits per pixel)를 반환합니다. 이 값을 활용하면 현재 사용자의 디스플레이가 표현할 수 있는 색상 품질 수준을 파악할 수 있습니다.

문법(Syntax)

기본 문법은 다음과 같습니다.

screen.colorDepth

별도의 매개변수 없이 호출하며, 숫자 형태의 비트 값을 반환합니다.

예제(Example)

HTML Screen colorDepth 속성의 실제 동작 예제를 살펴보겠습니다. 버튼을 클릭하면 현재 화면의 색상 깊이가 화면에 출력됩니다.

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

출력 결과(Output)

HTML Screen colorDepth 속성 – 화면 색상 비트 깊이 확인하기

위 화면에서 "Show color depth" 버튼을 클릭하면 현재 화면의 색상 깊이가 아래와 같이 표시됩니다.

HTML Screen colorDepth 속성 – 화면 색상 비트 깊이 확인하기

colorDepth 속성 활용 시 알아두면 좋은 점

대부분의 일반적인 모니터 환경에서는 24 또는 32가 반환됩니다.
screen.pixelDepth 속성과 사실상 동일한 값을 반환하며, 두 속성은 서로 바꿔 사용해도 무방합니다.
Chrome, Firefox, Safari, Edge 등 모든 주요 최신 브라우저에서 지원됩니다.
고품질 이미지나 그래픽 콘텐츠를 조건부로 렌더링하는 등 디스플레이 성능에 따른 분기 처리에 유용하게 활용할 수 있습니다.