HTML/CSS 2.4 · 2부. CSS 기초

색과 단위

색을 적는 네 가지와, px · em · rem · % 의 기준을 봅니다.

예상 학습 시간 16분 예제를 고치면 화면이 그대로 다시 그려집니다 난이도 입문

개념 설명

값을 적는 법

지금까지 #6e56cf·15px 같은 값을 사용했습니다. 이 단원에서는 그것들이 무엇이고 어떤 종류가 있는지 정리합니다.

최소 예제 · 편집 가능

색을 적는 네 가지

<p class="a">16진수로 적었습니다</p>
<p class="b">rgb 로 적었습니다</p>
<p class="c">이름으로 적었습니다</p>
<p class="d">반투명하게 적었습니다</p>

/* ① 16진수 — 가장 많이 사용합니다 */
.a { color: #d9480f; }

/* ② rgb — 빨강·초록·파랑을 0~255 로 */
.b { color: rgb(110, 86, 207); }

/* ③ 이름 — 148개가 정해져 있습니다 */
.c { color: teal; }

/* ④ 투명도를 함께 — 마지막 값이 0~1 입니다 */
.d { background: rgb(110 86 207 / 0.15); }

적는 법	보기	비고
16진수	`#d9480f`	두 자리씩 빨강·초록·파랑입니다. `#fff` 처럼 세 자리로 줄여 적을 수 있습니다.
rgb	`rgb(110, 86, 207)`	각각 0~255 입니다.
이름	`red`·`teal`	정해진 이름만 됩니다. 예제에서만 사용하고 실무에서는 값으로 적습니다.
hsl	`hsl(255 55% 57%)`	색상·채도·밝기입니다. 같은 색의 밝기만 바꿀 때 편합니다.

투명도는 / 0.15 처럼 뒤에 붙입니다. 0 이면 완전히 투명하고 1 이면 불투명합니다.

최소 예제 · 편집 가능

크기 단위

단위는 무엇을 기준으로 하는가로 갈립니다. 아래 넷의 차이를 눈으로 확인하십시오.

<div class="box">
  <p class="px">24px — 언제나 24픽셀</p>
  <p class="em">2em — 부모의 두 배</p>
  <p class="rem">1.5rem — 문서 기준의 1.5배</p>
  <p class="pct">너비 50%</p>
</div>

/* 이 상자의 글자 크기가 16px 입니다 */
.box { font-size: 16px; }

.px  { font-size: 24px; }
.em  { font-size: 2em; }    /* 16 × 2 = 32px */
.rem { font-size: 1.5rem; } /* 문서 기준 16 × 1.5 = 24px */
.pct { width: 50%; background: #ece7fb; }

단위	기준	주로 쓰는 곳
`px`	없습니다. 고정입니다.	테두리 두께, 작은 여백
`em`	그 요소의 글자 크기입니다.	글자에 딸린 여백
`rem`	문서의 글자 크기입니다(보통 16px).	글자 크기, 큰 여백
`%`	부모의 같은 속성 값입니다.	너비

em 은 겹치면 곱해집니다. 부모가 1.2em, 자식도 1.2em 이면 자식은 1.44배가 됩니다. 목록이 깊어질수록 글자가 커지는 일이 여기서 생깁니다. rem 은 언제나 문서 기준이라 그런 일이 없습니다.

상세 사용법

무엇을 언제 사용하는가

글자 크기는 rem. 읽는 사람이 브라우저에서 글자를 키웠을 때 함께 커집니다. px 로 박으면 그 설정이 무시됩니다.
테두리와 작은 값은 px. 1px 선은 어디서나 1px 이어야 합니다.
너비는 % 나 뒤에서 배울 유연한 단위. 고정 너비는 좁은 화면에서 넘칩니다(4.2).

0 에는 단위를 적지 않습니다. margin: 0 이면 충분하고 0px 이라고 적지 않습니다.

흔한 실수

세 가지

값에 단위를 빠뜨립니다. width: 200 은 무시됩니다. 오류가 나지 않아 왜 안 먹는지 보이지 않습니다. (line-height·font-weight 처럼 단위 없이 적는 속성은 예외입니다.)
em 이 겹쳐 커집니다. 목록 안의 목록에서 글자가 점점 커진다면 이것입니다. rem 으로 바꾸십시오.
16진수를 세 자리로 잘못 줄입니다. #ffffff 는 #fff 가 되지만, #d9480f 처럼 짝이 맞지 않는 값은 줄일 수 없습니다.

실습 문제

직접 해보기

1. em 을 rem 으로 바꾸기 난이도 하

위 두 번째 예제에서 .em 의 값을 바꿔 .px 와 같은 크기가 되게 하십시오. 두 가지 방법이 있습니다.

부모가 16px 이므로 24px 이 되려면 24 ÷ 16 배입니다. 아니면 문서 기준 단위로 바꿔도 됩니다.

/* 방법 1 — 부모 기준으로 계산 */ .em { font-size: 1.5em; } /* 방법 2 — 문서 기준으로 바꿈 */ .em { font-size: 1.5rem; }

요약

정리

색은 16진수로 적는 것이 가장 흔합니다. 투명도는 / 0.5 로 붙입니다.
em 은 그 요소의 글자 크기, rem 은 문서 기준입니다.
em 은 겹치면 곱해집니다. 글자 크기는 rem 이 안전합니다.
값에 단위를 빠뜨리면 그 선언이 무시됩니다. 0 은 예외입니다.