CSS의 rgb() 함수는 웹 페이지에서 색상을 지정할 때 사용하는 대표적인 색상 함수입니다. 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 기본 색상 채널의 강도를 조합하여 원하는 색상을 만들어냅니다.
rgb() 함수의 기본 문법
rgb() 함수의 각 매개변수는 해당 색상 채널의 강도를 나타내며, 0부터 255 사이의 숫자 또는 백분율(%)로 지정할 수 있습니다.
rgb(red, green, blue)
- red: 빨강 계열의 강도 (0~255 또는 0%~100%)
- green: 초록 계열의 강도 (0~255 또는 0%~100%)
- blue: 파랑 계열의 강도 (0~255 또는 0%~100%)
예를 들어 rgb(255, 0, 0)은 순수한 빨간색, rgb(0, 0, 0)은 검정색, rgb(255, 255, 255)는 흰색을 나타냅니다. 세 값이 모두 동일하면 회색조(무채색)가 됩니다.
예제 1: 텍스트와 배경색에 rgb() 적용하기
다음 예제에서는 div 요소의 글자 색상과 배경색을 rgb() 함수로 지정하는 방법을 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: rgb(213,33,33);
background-color: rgb(211,211,211);
font-size: 1.1em;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </div>
</body>
</html>
실행 결과
위 코드를 실행하면 연한 회색(rgb(211,211,211)) 배경 위에 붉은색 계열(rgb(213,33,33))의 텍스트가 양쪽 정렬되어 표시됩니다.
예제 2: 그리드 레이아웃에 rgb() 적용하기
이번 예제에서는 CSS Grid 레이아웃과 함께 rgb() 함수를 활용하여 그리드 컨테이너의 배경색과 각 항목의 배경색을 지정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
grid-area: newArea;
font-size: xx-large;
}
.item3 {
font-size: small;
}
.item4 {
font-size: medium;
}
.item5 {
font-size: x-large;
}
.grid-container {
display: grid;
grid-template-areas:
'newArea newArea . . .'
'newArea newArea . . .';
grid-gap: 5px;
background-color: rgb(0,255,255);
padding: 5px;
}
.grid-container > div {
background-color: rgb(255, 50, 80);
text-align: center;
padding: 5px 0;
}
</style>
</head>
<body>
<h1>Heading One</h1>
<p>Set some random numbers</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>
실행 결과
청록색(rgb(0,255,255)) 그리드 컨테이너 안에 분홍빛 계열(rgb(255,50,80))의 항목들이 배치되어 표시됩니다.
알아두면 좋은 팁
- 투명도까지 함께 지정하고 싶다면 rgba() 함수를 사용하세요. 네 번째 매개변수로 0(완전 투명)~1(완전 불투명) 사이의 알파 값을 추가할 수 있습니다.
- 최신 CSS 문법에서는 쉼표 대신 공백으로 구분하는 rgb(213 33 33) 형식도 지원됩니다.
- rgb() 값은 16진수 색상 코드(예: #d52121)로 변환하여 사용할 수도 있으며, 두 표기법은 동일한 색상을 나타냅니다.