웹 페이지에서 배경색의 투명도를 조절하고 싶다면 RGBA 색상 값을 사용하는 것이 가장 간단하고 효과적인 방법입니다. RGBA는 기존 RGB 색상에 알파(Alpha) 채널을 추가한 형식으로, 마지막 네 번째 값이 요소의 불투명도를 결정합니다.
RGBA 색상 값의 기본 구조
RGBA 값은 아래와 같은 형식으로 작성합니다.
rgba(red, green, blue, alpha)
알파 값은 0부터 1 사이의 숫자로 지정하며, 0은 완전히 투명, 1은 완전히 불투명을 의미합니다. 예를 들어 0.2로 지정하면 20% 불투명(80% 투명) 상태가 됩니다.
opacity 속성과의 차이점
CSS에는 요소 전체의 투명도를 조절하는 opacity 속성도 있지만, 이 속성은 텍스트와 같은 자식 요소까지 함께 투명하게 만든다는 단점이 있습니다. 반면 rgba()를 배경색에 적용하면 배경만 투명해지고 내용은 선명하게 유지할 수 있어 실무에서 더욱 널리 활용됩니다.
예제
아래 코드를 실행하면 서로 다른 불투명도가 적용된 세 개의 div 요소를 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
background: rgb(40, 135, 70);
padding: 20px;
}
div.first {
background: rgba(40, 135, 70, 0.2);
}
div.second {
background: rgba(40, 135, 70, 0.6);
}
</style>
</head>
<body>
<p>RGBA color values</p>
<div class = "first"><p>20% opacity</p></div>
<div class = "second"><p>60% opacity</p></div>
<div><p>Default Opacity</p></div>
</body>
</html>위 예제에서는 동일한 RGB 값(40, 135, 70)을 사용하되 알파 값만 다르게 지정했습니다. 그 결과 같은 초록색 계열의 배경이 각각 20%, 60%, 100%(기본값)의 불투명도로 표시되는 것을 확인할 수 있습니다. 이처럼 알파 값 하나만 조절하면 디자인 의도에 맞는 다양한 투명 효과를 손쉽게 구현할 수 있습니다.