CSS rgb() 함수란?
CSS rgb() 함수는 RGB 색상 모델을 기반으로 색상을 정의하는 데 사용됩니다. 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 색상 채널의 값을 각각 0~255 범위로 지정하여 원하는 색을 표현할 수 있습니다.
CSS rgba() 함수란?
CSS rgba() 함수는 RGB 색상에 알파(Alpha) 값, 즉 투명도를 추가로 지정할 수 있는 함수입니다. 네 번째 매개변수인 알파 값은 0(완전히 투명)부터 1(완전히 불투명) 사이의 숫자로 설정되며, 요소를 반투명하게 표현하고 싶을 때 특히 유용합니다.
예를 들어 rgba(255,0,0,0.9)는 불투명도가 90%인 빨간색을 의미합니다. 아래 예제 코드를 실행하면 h1, h2, p 요소에 각각 다른 방식으로 색상을 적용하는 과정을 직접 확인할 수 있습니다.
예제 코드
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color:hsl(0,100%,50%);
}
h2 {
background-color:rgb(0,0,255);
color: rgb(255,255,255);
}
p {
background-color:rgba(255,0,0,0.9);
}
</style>
</head>
<body>
<h1>Red Background</h1>
<h2>Blue Background</h2>
<p>This is demo text!</p>
</body>
</html>코드 설명
- h1 요소: HSL 색상 모델(
hsl(0,100%,50%))을 사용해 순수한 빨간색 배경을 적용했습니다. - h2 요소:
rgb(0,0,255)로 파란색 배경을 지정하고, 글자색은rgb(255,255,255)흰색으로 설정해 가독성을 높였습니다. - p 요소:
rgba(255,0,0,0.9)를 사용해 약간의 투명도가 있는 빨간색 배경을 적용했습니다.
이처럼 rgba() 함수를 활용하면 배경색 위에 겹치는 요소나 오버레이 효과 등에서 자연스러운 반투명 스타일을 손쉽게 구현할 수 있습니다.