CSS에서 대체 색상(Fallback Color) 선언하는 방법

웹 개발에서 대체 색상(Fallback Color)은 브라우저가 RGBA 색상을 지원하지 않을 경우를 대비해 지정하는 색상입니다. RGBA 색상이나 대체 색상을 지원하지 않는 브라우저로는 Opera 9 이하 버전, IE(Internet Explorer) 8 이하 버전 등이 있습니다.

RGBA 색상 앞에 먼저 단색(solid color)을 선언하면, 브라우저가 RGBA 색상을 해석하지 못하더라도 앞서 선언한 단색이 그대로 적용되기 때문에 화면이 깨지는 문제를 방지할 수 있습니다.

CSS에서 대체 색상 선언하기

다음은 CSS에서 대체 색상을 선언하는 예제 코드입니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
    padding:20px;
    font-size: 24px;
    background-color: purple; /* 대체 색상(fallback color) */
    background-color: rgba(128, 0, 128, 0.527);
    color:white;
}
</style>
</head>
<body>
<h1>대체 색상 예제</h1>
<div>div 안에 들어간 임의의 텍스트입니다</div>
</body>
</html>

실행 결과

위 코드를 실행하면 다음과 같은 결과가 출력됩니다.

CSS에서 대체 색상(Fallback Color) 선언하는 방법

동작 원리

핵심 원리는 간단합니다. 브라우저는 CSS 속성을 위에서부터 순서대로 읽어들이며, 인식하지 못하는 값은 무시하고 넘어갑니다. 따라서 먼저 background-color: purple;처럼 모든 브라우저가 이해할 수 있는 단색을 선언하고, 바로 아래에 rgba() 값을 선언하면 됩니다.

RGBA를 지원하는 최신 브라우저: 나중에 선언된 rgba 값으로 덮어써서 반투명 효과가 적용됩니다.
RGBA를 지원하지 않는 구형 브라우저: rgba 값을 무시하고 앞서 선언된 purple 단색을 그대로 사용합니다.

이러한 기법은 오래된 브라우저와의 호환성(크로스 브라우징)을 확보해야 하는 프로젝트에서 유용하게 활용됩니다.