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>헥스 코드</title>
  </head>
  <body>
    <div class="hex-colors">
      <p class="red-hex">이 글자는 빨간색입니다.</p>
      <h1 class="green-hex">이 글자는 초록색입니다.</h1>
      <h2 class="blue-hex">이 글자는 파란색입니다.</h2>
      <div class="yellow-hex">이 글자는 노란색입니다.</div>
      <span class="white-hex">이 글자는 흰색입니다.</span>
      <a href="https://example.com" class="black-hex"
        >이 링크는 검은색입니다.</a
      >
      <div class="lime-hex">이 글자는 연두색입니다.</div>
    </div>
  </body>
</html>

# 헥스 코드(Hex code)

`헥스`는 16진수를 의미하는 `hexadecimal`의 줄임말로, 16진수로 색상 값을 표현합니다.

<br />

## 기본 구조

헥스 코드는 `#` 기호로 시작하고, 그 뒤에 6자리의 16진수 문자(0-9, A-F)가 옵니다.

예시:

- `#FFFFFF` → 흰색
- `#000000` → 검은색
- `#FF0000` → 빨간색

<br />

## 색상의 구성

헥스 코드의 6자리는 2자리씩 묶어서, 각각 빨간색(R), 녹색(G), 파란색(B)을 나타냅니다.

예를 들어, `#FF5733` 라는 헥스 코드에서

- `FF`는 빨간색의 강도를 나타냅니다.

- `57`는 녹색의 강도를 나타냅니다.

- `33`는 파란색의 강도를 나타냅니다.

<br />

## 사용법

CSS에서 헥스 코드를 사용하여 요소의 색상을 지정할 수 있습니다.

```css
div {
  background-color: #ff5733;
}
```

위 코드는 `div` 요소의 배경색을 `#FF5733` 색상으로 설정합니다.

<br />

## 짧은 헥스 코드

때로는 3자리 헥스 코드를 사용하여 색상을 표현하기도 합니다. 이는 각 색상 구성 요소가 동일한 값을 가질 때 유용하게 사용됩니다.

예시:

- `#FFF` → `#FFFFFF` (흰색)
- `#000` → `#000000` (검은색)

<br />

코드의 별표로 강조된 부분을 따라 입력해 보세요.