CSS에서 rgb를 통한 색상 지정

교재 맨 처음, 색상을 공부할 때 색상은 영어 단어로, rgb를 통해, 또는 #를 통해 지정할 수 있다고 말씀드렸습니다. 마지막 두 형식은 모든 색조의 색상을 얻을 수 있게 해줍니다. 이 형식들이 정확히 어떻게 작동하는지 알아봅시다.

이 방법들을 이해하려면, 먼저 컴퓨터 화면에서 원하는 색상이 어떻게 얻어지는지 이해해야 합니다.

사실 화면의 개별 점(픽셀)은 필요한 모든 색상을 낼 수 없습니다. 기술적으로 매우 복잡하기 때문입니다. 화면의 각 점은 세 가지 색상만 낼 수 있습니다: 빨간색, 초록색, 파란색. 하지만 동시에 그리고 다른 비율로 낼 수는 있습니다.

이 색상들을 조합하면 화가가 물감으로 하는 것처럼 필요한 어떤 색상이든 얻을 수 있습니다: 여러 색상을 섞어 또 다른 새로운 색상을 얻는 것처럼 말이죠.

CSS에서 색상을 혼합하려면 속성 값으로 키워드 rgb를 지정한 후, 쉼표로 구분하여 이 세 가지 기본 색상을 어떤 비율로 취해야 하는지 나열해야 합니다. 색상 자체는 0부터 255까지 변경될 수 있습니다. 0은 색상의 부재를, 255는 순수한 색상(예를 들어 순수 빨간색)을 의미합니다.

rgb라는 글자 자체는 red, green, blue의 약자입니다.

예제를 통해 살펴봅시다.

예제

순수 빨간색과 순수 파란색을 섞어봅시다. 첫 번째 값을 255로, 두 번째를 0로, 세 번째를 255로 설정하면 보라색이 됩니다:

<p>
	텍스트
</p>

p {
	color: rgb(255, 0, 255);
}

예제

이제 첫 번째 값을 255로, 나머지 모두를 0으로 설정해봅시다. 결과는 순수 빨간색입니다:

<p>
	텍스트
</p>

p {
	color: rgb(255, 0, 0);
}

예제

이렇게 하면 순수 초록색이 됩니다:

<p>
	텍스트
</p>

p {
	color: rgb(0, 255, 0);
}

예제

초록색에 255 대신 100를 설정하면 부분적으로 초록색이 됩니다:

<p>
	텍스트
</p>

p {
	color: rgb(0, 100, 0);
}

예제

세 가지 색상을 임의의 비율로 섞어봅시다. 어떻게 되는지 보세요:

<p>
	텍스트
</p>

p {
	color: rgb(200, 100, 125);
}

예제

모든 값을 255로 설정하면 순수 흰색이 됩니다:

p {
	color: rgb(255, 255, 255);
}

예제

모든 값을 0로 설정하면 순수 검은색이 됩니다:

p {
	color: rgb(0, 0, 0);
}

실습 문제

rgb를 통해 색상을 지정하여 모든 단락을 빨간색으로 만드세요.

rgb를 통해 색상을 지정하여 모든 h2를 초록색으로 만드세요.

rgb를 통해 색상을 지정하여 모든 h3를 파란색으로 만드세요.

순수 빨간색과 순수 초록색을 섞으세요. 어떤 색상이 나오나요?