lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

webIntroCssChapter5Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

<!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>Opacity 예제</title>
  </head>
  <body>
    <div class="transparent-box">이 텍스트 박스는 50% 투명도를 가집니다.</div>
    <div class="opaque-box">이 텍스트 박스는 완전 불투명합니다.</div>
  </body>
</html>

# 투명도(Opacity)

물감으로 그림을 그릴 때, 물을 섞으면 색상을 조금 더 투명하게 만들 수 있습니다.

물감의 투명도가 높아지면 아래의 레이어나 배경이 투명하게 비쳐 보이게 됩니다.

CSS에서 `opacity`는 웹 요소의 투명도를 조절하는 속성으로, HTML 요소에 투명한 물감과 같은 효과를 줄 수 있습니다.

<br />

**opacity 속성**

`opacity` 속성은 0.0에서 1.0 사이의 값을 갖습니다.

여기서 0.0은 완전히 투명, 1.0은 완전히 불투명을 의미합니다. 값이 작아질수록 요소는 더 투명해지고, 값이 커질수록 더 불투명해집니다.

예시 코드:

```css title="CSS"
.transparent-box {
  opacity: 0.5; /* 50% 투명도 */
}

.opaque-box {
  opacity: 1; /* 100% 불투명 (기본값) */
}
```

<br />

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