CSS에서 rgb를 통한 색상 지정

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

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

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

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

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

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

예제를 통해 살펴봅시다.

예제

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

html<p>
  텍스트
</p>

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

Результат:

예제

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

html<p>
  텍스트
</p>

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

Результат:

예제

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

html<p>
  텍스트
</p>

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

Результат:

예제

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

html<p>
  텍스트
</p>

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

Результат:

예제

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

html<p>
  텍스트
</p>

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

Результат:

예제

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

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

예제

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

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

실습 문제