RGBA는 Red(빨강), Green(초록), Blue(파랑), Alpha(알파)의 앞 글자를 딴 약자로, CSS2의 색상 표기법을 확장한 형식입니다. 앞의 세 값은 각각 빨강, 초록, 파랑의 강도를 나타내며, 마지막 Alpha 값은 해당 색상의 불투명도(opacity)를 지정합니다.
Alpha 매개변수는 0.0부터 1.0 사이의 숫자로 표현됩니다. 0.0은 완전히 투명한 상태, 1.0은 완전히 불투명한 상태를 의미하며, 예를 들어 0.3으로 설정하면 원래 색상이 30%의 농도로 표시되어 반투명한 효과를 얻을 수 있습니다.
예제
다음 예제는 rgba 색상 속성을 사용하여 세 개의 문단에 각각 빨강, 초록, 파랑 배경색을 반투명하게 적용하는 방법을 보여줍니다.
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
</style>
</head>
<body>
<p>RGBA 색상:</p>
<p id = "p1">빨강</p>
<p id = "p2">초록</p>
<p id = "p3">파랑</p>
</body>
</html>
실행 결과
위 코드를 브라우저에서 실행하면 각 문단에 30% 불투명도의 빨강, 초록, 파랑 배경색이 적용된 것을 확인할 수 있습니다. 배경색이 반투명하게 처리되므로 요소 뒤에 있는 콘텐츠가 살짝 비치는 시각적 효과가 나타납니다.
참고 사항
- Alpha 값이 0이면 요소가 완전히 투명해져 화면에 보이지 않습니다.
- 일반적인 16진수 색상 코드(
#RRGGBB)로는 불투명도를 지정할 수 없으므로, 반투명 효과가 필요할 때는rgba()를 사용하는 것이 좋습니다. rgba()는 IE9 이상을 포함한 대부분의 최신 브라우저에서 지원되므로 호환성 걱정 없이 안심하고 사용할 수 있습니다.