반투명한 색

반투명한 색은 아래가 비쳐 보이는 색입니다. rgb(0 0 0 / 0.1)은 검정을 10%만 칠해, 그 밑의 바닥이 90% 비칩니다.

10단원 둥근 모서리·그림자·넘치는 내용에서 카드 그림자를 연한 회색 #d2d2d7로 칠했습니다. 그림자는 빛이 가려져 바닥이 조금 어두워진 곳인데, 회색은 바닥이 무슨 색이든 늘 같은 회색입니다. 그래서 바닥색이 바뀌면 그림자가 아니라 카드 둘레에 칠한 얼룩처럼 보입니다. 이 레슨은 바닥이 비치는 색을 적는 법과, 그림자를 반투명한 검정으로 칠하는 까닭을 봅니다.

그림 준비 중

1/ 뒤의 수는 불투명도

4단원 색 쓰기의 rgb() 괄호에 값을 하나 더 적으면 반투명한 색이 됩니다.

<p class="note">오늘의 추천</p>

.note {
  background-color:
    rgb(0 91 181 / 0.2);
}

강조색을 20%만 칠해 흰 바탕이 비치니 연한 파랑으로 보입니다. Computed 창은 반투명한 색을 rgba(…) 꼴로 보입니다 — 3절에서 봅니다.

2그림자는 반투명한 검정으로

반투명한 검정은 바닥색을 살린 채 조금 어둡게만 합니다. 바닥이 연한 회색이면 조금 짙은 회색으로, 주황이면 조금 짙은 주황으로 보입니다. 위 실험대의 세 바닥에서 두 그림자를 견주면 이렇습니다.

어두운 바닥에서 반투명한 그림자가 거의 보이지 않는 것도 그림자다운 일입니다 — 이미 어두운 곳은 빛이 가려져도 조금만 더 어두워집니다. 그래서 그림자는 반투명한 검정으로 칠하고, 16단원에서 다크 모드를 만들 때도 고치지 않고 그대로 씁니다.

3옛 꼴 rgba()와 투명

같은 색을 쉼표로 나눈 rgba(0, 0, 0, 0.1)로 적은 코드도 자주 만납니다. 넷째 값이 불투명도이고, a는 알파(alpha)의 첫 글자입니다. 두 꼴은 같은 색입니다.

<div class="a">가</div>
<div class="b">나</div>

.a {
  background-color:
    rgb(0 0 0 / 0.1);
}

.b {
  background-color:
    rgba(0, 0, 0, 0.1);
}

계산된 값이 같습니다. Computed 창은 어느 꼴로 적어도 쉼표 꼴 rgba(…)로 보입니다. 앞 레슨들의 잰 값에 나온 rgba(0, 0, 0, 0)도 이제 읽힙니다 — 불투명도가 0인 색, 곧 바탕을 칠하지 않은 투명입니다.

예제

어두운 바닥에서 그림자가 빛난다

어두운 바닥 위에 흰 카드를 놓았더니, 회색 그림자가 카드 둘레에 빛나는 테두리처럼 보입니다.

<div class="floor">
  <div class="card">잡채</div>
</div>

.floor {
  padding: 24px;
  background-color: #121820;
}

.card {
  padding: 16px;
  background-color: #ffffff;
  box-shadow: 0 2px 8px #d2d2d7;
}

Computed 창의 box-shadow는 색을 앞에 두고 흐림 다음에 퍼짐 0px까지 적어 보입니다. 색 rgb(210, 210, 215)는 불투명한 연한 회색이라, 어두운 바닥 위에서 밝게 칠해집니다. 그림자 색을 반투명한 검정으로 바꿉니다.

.card {
  box-shadow:
    0 2px 8px rgb(0 0 0 / 0.1);
}

빛나던 테두리가 사라졌습니다. 이 바닥에서는 그림자가 거의 보이지 않고, 밝은 바닥에 놓으면 다시 그림자로 보입니다.

자주 틀리는 곳

틀린 생각: 반투명하게 하려면 opacity를 준다.

<div class="floor">
  <div class="label">
    추천 레시피
  </div>
</div>

.floor {
  padding: 16px;
  background-color: #121820;
}

.label {
  background-color: #005bb5;
  color: #ffffff;
  opacity: 0.5;
}

어두운 바닥 위에서 바탕만 옅어지길 바랐는데, 흰 글자까지 함께 흐려져 회색으로 보입니다. opacity는 요소 전체(안의 글자와 자식까지)를 반투명하게 그려, 글자에도 어두운 바닥이 비칩니다. 글자색 값은 흰색 그대로라 잰 값에는 드러나지 않고, 그려진 모습만 흐려집니다.

맞는 규칙: 바탕만 비치게 하려면 그 색에 불투명도를 붙입니다(rgb(0 91 181 / 0.5)) — 같은 바닥에서 바탕은 같게 옅어지고 글자는 흰색 그대로 또렷합니다. opacity는 요소 전체를 흐리게 할 때만 씁니다.

틀린 생각: 옛 꼴처럼 불투명도 앞에 쉼표를 쓴다.

<div class="card">가</div>

.card {
  background-color: #f5f5f7;
}

.card {
  background-color:
    rgb(0 0 0, 0.1);
}

뒤 규칙의 선언은 빈칸 꼴과 쉼표 꼴을 한 괄호에 섞어 브라우저가 알아듣지 못하고 버렸습니다. 앞 규칙의 연한 회색이 남았습니다. Styles 창에서는 그 선언에 취소선과 경고 표시가 붙습니다(크롬 기준).

맞는 규칙: 빈칸 꼴은 /로, 쉼표 꼴(rgba)은 쉼표로 — 한 괄호에 섞지 않습니다. 알아듣지 못한 선언은 그것만 버립니다(브라우저 규칙 4).

틀린 생각: 불투명도 10%는 10으로 적는다.

<div class="card">가</div>

.card {
  box-shadow:
    0 2px 8px rgb(0 0 0 / 10);
}

불투명도는 0에서 1 사이의 수라, 1을 넘는 10은 1(불투명)로 읽혀 새까만 그림자가 됩니다.

맞는 규칙: 10%는 0.1이나 10%로 적습니다.

확인 문제

1. 예제의 고친 코드에서 바닥 .floor의 배경색만 주황 #ffa500으로 바꿉니다. Computed 창에서 .card의 box-shadow 색은 무엇으로 보일까요?

<div class="floor">
  <div class="card">잡채</div>
</div>

.floor {
  padding: 24px;
  background-color: #ffa500;
}

.card {
  padding: 16px;
  background-color: #ffffff;
  box-shadow:
    0 2px 8px rgb(0 0 0 / 0.1);
}

• ① rgba(0, 0, 0, 0.1)
• ② rgba(255, 165, 0, 0.1)
• ③ rgb(230, 149, 0)

2. 그림자를 검정 30%로 칠하려 합니다. ____ 자리를 채우세요.

.card {
  box-shadow:
    0 0 8px ____;
}

<div class="card">가</div>

.card {
  box-shadow:
    0 0 8px rgb(0 0 0 / 0.3);
}

3. 여행 일정 카드에 그림자가 보이지 않습니다. Computed 창의 box-shadow는 none입니다. 고친 선언을 쓰세요.

<div class="day">
  셋째 날 — 시장 구경
</div>

.day {
  padding: 16px;
  box-shadow:
    0 0 8px rgb(0 0 0, 0.2);
}

<div class="day">
  셋째 날 — 시장 구경
</div>

.day {
  padding: 16px;
  box-shadow:
    0 0 8px rgb(0 0 0 / 0.2);
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 고친 코드를 index.html과 style.css로 저장하고 link로 이어 엽니다(문서 뼈대의 body 안에 예제 HTML을 넣습니다). .floor의 배경색을 #f5f5f7 · #ffa500 · #121820으로 바꿔 가며 그림자가 어떻게 보이는지 먼저 적고, 저장한 뒤 새로고침합니다. 그림자 색을 #d2d2d7로 바꿔 세 바닥에서 견줍니다.