RGB 색상

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 27번째.

CSS에서 RGB 색상은 rgb() 함수 표기법을 사용하여 색상을 지정하는 방법입니다. RGB는 Red(빨강), Green(초록), Blue(파랑)의 약자이며, 각 색상은 0에서 255 사이의 값으로 표현됩니다. 이 세 가지 기본 색상의 강도를 다르게 조합함으로써 광범위한 색상 스펙트럼을 생성할 수 있습니다.

CSS에서 RGB 색상을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

예를 들어:

p {
    color: rgb(255, 0, 0); /* 빨강 */
    background-color: rgb(0, 255, 0); /* 초록 */
}

h1 {
    color: rgb(0, 0, 255); /* 파랑 */
}

.highlight {
    background-color: rgb(255, 255, 0); /* 노랑 */
}

챌린지

쉬움

제목(<h1>), 단락(<p>), 그리고 디비전(<div>)이 포함된 HTML 문서가 주어집니다. 페이지의 모든 요소에 원하는 배경색과 글자색을 지정하되, rgb()를 사용하여 설정하세요.

기본 색상은 허용되지 않습니다!

치트 시트

RGB 색상은 빨강, 초록, 파랑에 대해 0에서 255 사이의 값을 사용하는 rgb() 함수 표기법을 사용합니다:

selector {
    color: rgb(red, green, blue);
    background-color: rgb(red, green, blue);
}

예시:

p {
    color: rgb(255, 0, 0); /* 빨강 */
    background-color: rgb(0, 255, 0); /* 초록 */
}

h1 {
    color: rgb(0, 0, 255); /* 파랑 */
}

.highlight {
    background-color: rgb(255, 255, 0); /* 노랑 */
}

직접 해보기

<html>
<head>
    <title>RGB Colors</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>