CSS의 rgba() 함수는 색상을 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 색상 채널과 알파(Alpha) 값으로 정의합니다. 여기서 알파 값은 색상의 불투명도(opacity)를 의미하며, 0.0부터 1.0 사이의 숫자로 지정합니다. 1.0은 완전히 불투명한 상태, 0.0은 완전히 투명한 상태를 나타냅니다.
rgba() 함수의 기본 문법
rgba(red, green, blue, alpha)
- red, green, blue: 각 색상 채널의 강도를 0~255 사이의 숫자 또는 백분율로 지정합니다.
- alpha: 0.0(완전 투명)부터 1.0(완전 불투명) 사이의 소수로 투명도를 지정합니다.
예제 1
다음은 rgba() 함수를 활용해 다양한 투명도를 적용하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: rgba(140, 100%, 50%, 0.8);}
#demo2 {background-color: rgba(130, 100%, 50%, 0.6);}
#demo3 {background-color: rgba(190, 100%, 50%, 0.4);}
#demo4 {background-color: rgba(170, 100%, 50%, 0.3);}
#demo5 {background-color: rgb(150, 100%, 60%);}
#demo6 {
background-color: rgba(108,111,35,0.6);
font-size:30px;
color:yellow;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h1>크리켓 선수</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">호주 크리켓 선수단</p>
</body>
</html>실행 결과
위 코드를 실행하면 알파 값이 작아질수록 배경색이 점점 더 투명해지는 것을 확인할 수 있습니다. 마지막 요소는 rgba(108,111,35,0.6)으로 반투명한 올리브 계열 배경에 노란색 글자가 적용되고, 45도 회전된 형태로 표시됩니다.
예제 2
이번에는 텍스트 장식(text-decoration)과 함께 rgba()를 사용하는 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: rgba(100, 150, 50, 0.6);
text-decoration: line-through;
text-decoration-color: blue;
}
.demo2 {
text-decoration: underline;
text-decoration-color: yellow;
}
</style>
</head>
<body>
<h1>시험 안내</h1>
<p class="demo">시험장 위치: <span>XYZ 대학</span> ABC 대학.</p>
<p class="demo2">시험 시작 시간: 오전 11시.</p>
</body>
</html>실행 결과
span 요소에는 rgba(100, 150, 50, 0.6)으로 설정된 반투명한 녹색 배경이 적용되며, 파란색 취소선이 함께 표시됩니다. 두 번째 문단에는 노란색 밑줄이 적용되어 rgba()가 배경색뿐 아니라 다양한 스타일 속성과 자연스럽게 조합될 수 있음을 보여줍니다.
정리
rgba() 함수는 RGB 색상 값에 알파 채널을 추가하여 요소의 투명도를 세밀하게 제어할 수 있는 강력한 도구입니다. 배경색, 텍스트 색상, 테두리 등 다양한 CSS 속성에서 활용할 수 있으며, 특히 겹치는 레이어나 오버레이 효과를 구현할 때 유용합니다.