lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>CSS 컬러 - RGB</title>
  </head>
  <body>
    <div class="color-boxes">
      <p class="red-text">이 글자는 빨간색입니다.</p>
      <h1 class="green-text">이 글자는 초록색입니다.</h1>
      <h2 class="blue-text">이 글자는 파란색입니다.</h2>
      <div class="purple-text">이 글자는 보라색입니다.</div>
      <span class="white-text">이 글자는 흰색입니다.</span>
      <a href="https://example.com" class="black-text"
        >이 링크는 검은색입니다.</a
      >
    </div>
  </body>
</html>

# RGB 컬러 시스템

"RGB"는 `Red`, `Green`, `Blue`의 첫 글자를 따서 만든 이름으로, 빨강, 초록, 파랑 세 가지 기본 색을 혼합해서 다양한 색을 만듭니다.

<br />

## RGB 색상이란?

모든 색은 RGB는 빨강(Red), 초록(Green), 파랑(Blue)의 세 가지 색을 조합해 만들 수 있습니다. 각 색상의 밝기는 0에서 255 사이의 숫자로 표현합니다.

<br />

## CSS에서 RGB 사용하기

CSS에서는 `rgb()`라는 함수를 사용해 RGB 색상 값을 설정합니다.

괄호 안에 빨강(R), 초록(G), 파랑(B) 숫자 값을 차례대로 넣으면 원하는 색상을 표현할 수 있습니다.

<br />

```css
/* 빨간색 텍스트 */
p {
  color: rgb(255, 0, 0);
}

/* 초록색 텍스트 */
h1 {
  color: rgb(0, 255, 0);
}

/* 파랑색 텍스트 */
h2 {
  color: rgb(0, 0, 255);
}
```

<br />

## 다양한 컬러 만들기

빨강, 초록, 파랑의 값을 조절해 다양한 컬러를 만들 수 있습니다. 예를 들어, 빨강과 파랑을 동일한 양으로 섞으면 보라색을 만들 수 있습니다.

```css
/* 글자 색상 보라색으로 설정 */
div {
  color: rgb(255, 0, 255);
}
```

<br />

빨강, 초록, 파랑 모두 최대값인 255로 설정하면 흰색이 나오고, 모두 0으로 설정하면 검은색이 만들어집니다.

```css
/* 흰색 글자 */
span {
  color: rgb(255, 255, 255);
}

/* 검은색 글자 */
a {
  color: rgb(0, 0, 0);
}
```