RGB 색상 값은 빨간색, 녹색 및 파란색 광원을 나타낸다.
CSS RGB 값
CSS에서 색상은 다음 공식을 사용하여 RGB 값으로 지정할 수 있다:
rgb(빨강, 초록, 파랑)
각 파라미터(빨간색, 녹색 및 파란색)는 0과 255 사이의 색상 강도를 정의한다.
예를 들어, 빨간색은 가장 높은 값(255)으로 설정되고 다른 값은 0으로 설정되므로 RGB(255, 0, 0)는 빨간색으로 표시됩니다.
검은색을 표시하려면 모든 색상 파라미터를 0으로 설정합니다. rgb(0, 0, 0)와 같이 설정합니다.
흰색을 표시하려면 모든 색상 매개 변수를 255로 설정합니다(예: rgb(255, 255, 255).
| <!DOCTYPE html> <html> <body> <h1>RGB 값을 사용하여 색상 지정</h1> <h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2> <h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2> <h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2> <h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2> <h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2> <h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2> </body> </html> |
위의 코드를 실행한 화면이 아래 그림이다.
회색 음영은 세 가지 광원 모두에 대해 동일한 값을 사용하여 정의되는 경우가 많다:
| <!DOCTYPE html> <html> <body> <h1>회색 음영</h1> <p>빨간색, 녹색 및 파란색에 동일한 값을 사용하면 다양한 회색 색조를 얻을 수 있습니다:</p> <h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2> <h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2> <h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2> <h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2> <h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2> <h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2> </body> </html> |
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
CSS RGBA 색상
RGBA 색상 값은 색상의 불투명도를 지정하는 알파 채널을 사용하여 RGB 색상 값을 확장한 것이다.
RGBA 색상 값은 다음과 같이 지정된다:
rgba(빨강, 초록, 파랑, 알파)
알파 매개 변수는 0.0(완전 투명)과 1.0(전혀 투명하지 않음) 사이의 숫자이다:
| <!DOCTYPE html> <html> <body> <h1>RGBA로 투명한 색상 만들기</h1> <h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2> <h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2> <h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2> <h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2> <h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2> <h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2> </body> </html> |
실행 결과 화면은 아래 그림과 같다.
지금까지 CSS RGB, RGBA 색상 관련해서 살펴보았다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS HSL 색상 (0) | 2023.07.05 |
|---|---|
| CSS HEX Colors (0) | 2023.07.04 |
| CSS 색상(CSS Colors) (0) | 2023.07.02 |
| CSS 주석(CSS Comments) (0) | 2023.07.01 |
| CSS 추가하는 방법 (0) | 2023.06.30 |
댓글