색 쓰기

CSS에서 색은 빛의 세 색, 빨강 · 초록 · 파랑을 얼마씩 섞을지로 적습니다. 이 과목은 #005bb5처럼 # 뒤에 여섯 자리를 쓰고, 글자에는 color, 배경에는 background-color를 씁니다.

지금까지 예제의 색 값은 정해 준 대로 옮겨 적기만 했습니다. 여섯 자리가 무엇으로 되어 있는지 읽을 줄 알면 남이 쓴 CSS의 색을 알아보고, 글자와 바탕이 잘 읽히는 짝을 고를 수 있습니다.

h1 {  color: #005bb5;}

1#rrggbb — 두 자리씩 세 빛

#rrggbb는 # 뒤에 여섯 자리를 적는 꼴입니다. 앞에서부터 두 자리씩 빨강(r) · 초록(g) · 파랑(b)의 양입니다. 두 자리는 16진수로 적습니다. 0~9 다음에 a~f를 이어 세는 셈이라, 두 자리로 00(없음)부터 ff(가득)까지 적을 수 있습니다.

빨강은 없고 초록이 조금, 파랑이 많아 진한 파랑입니다. 셋 다 ff인 #ffffff는 흰색, 셋 다 00인 #000000은 검은색입니다.

16진수를 숫자로 바꾸는 셈은 하지 않아도 됩니다. 색 값은 디자인 도구나 개발자 도구가 알려 줍니다. 00은 없음, ff는 가득이라는 것과 두 자리씩 빨강 · 초록 · 파랑 차례라는 것만 읽을 줄 알면 됩니다.

색에는 이름도 있습니다. red · white · black처럼 영어 이름으로 부를 수 있지만, 이름마다 정해진 색 하나뿐이라 미세한 색은 고를 수 없습니다. 이 과목은 소문자 여섯 자리 #rrggbb로 씁니다.

2rgb()와 계산된 값

같은 세 양을 0~255 숫자로 적는 꼴이 rgb()입니다. 숫자 셋을 빈칸으로 띄웁니다.

<h1>김치볶음밥</h1>

h1 {
  color: rgb(0 91 181);
}

#005bb5로 적었을 때와 같은 색입니다. 잰 값 칸에는 rgb(0, 91, 181)로 보입니다. 브라우저는 어느 꼴로 적었든 색을 이 꼴로 고쳐 적습니다. 이렇게 브라우저가 마지막으로 정한 값을 계산된 값(computed value)이라고 부르고, 개발자 도구에서도 이 꼴로 보입니다.

그래서 #005bb5 · rgb(0 91 181) · rgb(0, 91, 181)은 모두 같은 색입니다. 쉼표로 나눈 꼴은 예전 코드에서 자주 만납니다.

3글자색과 배경색, 그리고 대비

색을 받는 CSS 속성은 여럿입니다. 이 단원에서는 둘을 씁니다.

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

body {
  background-color: #f5f5f7;
}

h1 {
  color: #005bb5;
}

body의 배경을 칠하면 페이지 바탕 전체가 아주 연한 회색이 됩니다. p는 글자색을 정하지 않아 기본 글자색 그대로입니다.

글자색과 바탕색의 밝기 차이를 대비(contrast)라고 합니다. 대비는 두 색의 밝기로 셈한 '몇 대 1'로 적고, 클수록 잘 읽힙니다. 웹 접근성 지침 WCAG 2.2는 보통 글자에 4.5:1 이상을 권합니다(큰 글자는 3:1). 레시피 노트의 색은 이 기준을 넘게 골랐습니다.

대비는 크롬 개발자 도구의 색 고르개에서도 볼 수 있습니다. Styles 창의 색 선언 앞 작은 네모를 누르면 Contrast ratio(대비) 칸이 보입니다(크롬 기준 — Styles 창은 이 단원의 브라우저 기본 스타일과 Styles 창에서 엽니다).

예제

레시피 노트의 세 색

레시피 노트 상세 페이지의 머리 부분입니다. 바탕은 연회색, 제목은 진한 파랑, 정보 줄은 회색입니다.

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

body {
  background-color: #f5f5f7;
}

h1 {
  color: #005bb5;
}

p {
  color: #6e6e73;
}

• #f5f5f7은 세 빛이 모두 f5로 가득에 가까워 흰색에 가까운 회색입니다. 끝 자리 f7이 조금 더 커서 아주 옅게 파란빛이 돕니다.
• #6e6e73은 세 빛이 고르게 반쯤이라 회색입니다. 바탕 #f5f5f7과의 대비는 4.66:1로 기준을 넘습니다.

자주 틀리는 곳

틀린 생각: color로 요소의 배경을 칠할 수 있다.

공지 문단에 노란 띠를 깔려고 color에 노란색을 주면 이렇습니다.

<p>오늘은 휴무입니다.</p>

p {
  color: #ffd60a;
}

글자만 노래지고 바탕은 그대로 흰색입니다. 흰 바탕의 노란 글자는 잘 읽히지도 않습니다.

맞는 규칙: color는 글자만 칠합니다. 배경은 background-color로 칠합니다.

틀린 생각: 연한 회색 글자도 화면에 보이기만 하면 된다.

<p>김치는 잘 익은 것이 좋습니다.</p>

p {
  color: #aaaaaa;
}

흰 바탕에 #aaaaaa 글자는 대비가 2.32:1입니다. 밝은 곳에서 보는 휴대전화나 시력이 약한 사람에게는 잘 읽히지 않습니다. 흰 바탕이면 #767676(4.54:1)부터 4.5:1을 넘습니다.

맞는 규칙: 보통 글자와 바탕은 대비 4.5:1 이상으로 고릅니다(WCAG 2.2).

틀린 생각: 이름 색 blue는 레시피 노트의 파랑 #005bb5와 같은 색이다.

<h1>이름 색 blue</h1>
<p>숫자 색 #005bb5</p>

h1 {
  color: blue;
}

p {
  color: #005bb5;
}

blue는 #0000ff — 파랑만 가득하고 빨강 · 초록은 없는 색입니다. #005bb5와 다른 색입니다.

맞는 규칙: 이름 색은 이름마다 정해진 색 하나입니다. 원하는 색은 #rrggbb로 적습니다.

확인 문제

1. 예제의 CSS에서 h1 규칙의 #005bb5에서 # 기호를 지워 005bb5로 쓰면 화면은 어떻게 될까요?

• ① 제목은 파랑 그대로, 바탕 · 정보 줄도 그대로
• ② 제목만 기본 글자색, 바탕 · 정보 줄은 그대로
• ③ 바탕 · 제목 · 정보 줄 모두 기본 모양

<h1>김치볶음밥</h1>
<p>한식 · 조리 15분 · 2인분</p>

body {
  background-color: #f5f5f7;
}

h1 {
  color: 005bb5;
}

p {
  color: #6e6e73;
}

2. 재료 목록(ul)의 바탕을 아주 연한 회색 #f5f5f7로 칠하는 선언을 ____ 자리에 쓰세요.

<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>

ul {
  ____
}

<ul>
  <li>밥 2공기</li>
  <li>잘 익은 김치 1컵</li>
</ul>

ul {
  background-color: #f5f5f7;
}

3. 사진 동아리 공지의 제목을 진한 파랑 띠 위에 흰 글자로 만들려고 했습니다. 그런데 흰 바탕에 파란 글자로만 보입니다. 몇 번 줄을 어떻게 고쳐야 할까요? 고친 줄을 쓰세요.

<h2>사진 동아리 모집</h2>
<p>금요일 6시, 동아리방</p>

h2 {
  color: #005bb5;
  background-color: #ffffff;
}

<h2>사진 동아리 모집</h2>
<p>금요일 6시, 동아리방</p>

h2 {
  color: #ffffff;
  background-color: #005bb5;
}

컴퓨터에서 해 보기(선택) — 점수에 들지 않습니다. 폰으로만 보고 있다면 건너뛰세요. 예제의 HTML과 CSS를 index.html과 style.css로 저장하고 link로 이어 엽니다. h1 규칙의 # 기호를 지우면 어떻게 될지 확인 문제 1의 답을 먼저 적고, 저장하고 새로고침해 맞춰 봅니다.