색상과 단위

🎯 학습 목표

이 강을 마치면 여러분은 요소에 원하는 색을 여러 방식으로 지정하고, 크기를 나타내는 단위들을 상황에 맞게 골라 쓸 수 있게 됩니다. 지난 강에서 원하는 요소를 고르는 법을 배웠으니, 이번 강에서는 그 요소에 실제로 입힐 색과 크기라는 가장 기본적인 재료를 다룹니다.

구체적으로는 세 가지를 배웁니다. 첫째, 글자와 배경의 색을 지정하는 color와 background를 익힙니다. 둘째, 색을 표현하는 이름·16진수·rgb 방식을 살펴봅니다. 셋째, 크기 단위인 px·%·em·rem의 차이를 파악합니다.

🎨 색 지정하기 — color와 background

이 섹션에서는 색을 입히는 두 가지 기본 속성을 살펴보겠습니다.

색을 다루는 속성은 크게 둘입니다. 글자 색은 color로, 배경 색은 background-color(또는 줄여서 background)로 지정합니다.

p {
  color: white;
  background-color: navy;
}

이 코드는 문단의 글자를 흰색으로, 배경을 남색으로 만듭니다. color는 '글자 색', background는 '배경 색'이라고 짝지어 기억하면 헷갈리지 않습니다. 위 예시처럼 색을 이름(white, navy, red 등)으로 적을 수 있는데, 이것이 가장 간단한 방법입니다. 다만 이름으로 쓸 수 있는 색은 제한적이라, 세밀한 색을 쓰려면 다음에 배울 다른 방식이 필요합니다.

🔢 색을 숫자로 — 16진수와 rgb

이 섹션에서는 훨씬 다양한 색을 표현하는 16진수와 rgb 방식을 살펴보겠습니다.

정확한 색을 지정하려면 색을 숫자로 표현합니다. 가장 널리 쓰이는 것이 16진수(hex) 코드입니다. # 뒤에 여섯 자리를 적는데, 두 자리씩 빨강·초록·파랑의 세기를 나타냅니다. 각 두 자리는 00(가장 약함)부터 ff(가장 강함)까지의 값을 가집니다.

color: #ff0000;  /* 빨강 (빨강만 최대) */
color: #000000;  /* 검정 (모두 최소) */
color: #ffffff;  /* 흰색 (모두 최대) */
color: #3498db;  /* 하늘색 계열 */

예를 들어 #ff0000은 빨강이 최대(ff)이고 초록·파랑은 0이므로 순수한 빨강입니다. 참고로 #333333처럼 같은 숫자가 반복되면 #333으로 세 자리로 줄여 쓸 수 있습니다. 16진수는 처음엔 낯설지만, 디자인 도구가 색을 이 형식으로 알려 주기 때문에 실무에서 가장 많이 씁니다.

또 다른 방법은 rgb입니다. 빨강·초록·파랑 값을 각각 0부터 255까지의 숫자로 적습니다.

color: rgb(255, 0, 0);       /* 빨강 */
background: rgba(0, 0, 0, 0.5); /* 반투명 검정 */

여기서 rgba는 rgb에 투명도(a, 알파)를 하나 더한 것입니다. 마지막 값은 0(완전 투명)부터 1(완전 불투명) 사이로, 0.5면 반투명입니다. 배경을 은은하게 비치게 할 때 유용합니다. 16진수든 rgb든 같은 색을 다른 방식으로 적는 것이니, 편한 것을 골라 쓰면 됩니다.

📏 크기 단위 — 절대 단위 px

이 섹션에서는 크기를 나타내는 단위 중 가장 기본인 px를 살펴보겠습니다.

글자 크기, 여백, 너비 등 CSS에서 크기를 지정할 때는 반드시 단위를 붙입니다. 가장 기본이 px(픽셀)입니다. 픽셀은 화면을 이루는 아주 작은 점으로, font-size: 16px;이라고 하면 글자 높이가 정확히 16픽셀이 됩니다.

h1 { font-size: 32px; }
p  { font-size: 16px; }

px는 고정된 절대 크기라는 것이 특징입니다. 32px이라고 하면 어떤 상황에서도 32픽셀로 딱 고정됩니다. 그래서 예측하기 쉽고 직관적이라, 처음 배울 때 다루기 편합니다. 다만 화면 크기나 사용자 설정에 따라 유연하게 바뀌지 않는다는 한계가 있어, 이를 보완하는 상대 단위들이 있습니다.

🔗 상대 단위 — %, em, rem

이 섹션에서는 상황에 따라 유연하게 바뀌는 상대 단위들을 살펴보겠습니다.

상대 단위는 고정된 크기가 아니라 무언가에 비례하는 단위입니다. 세 가지를 봅시다.

첫째, %(퍼센트)는 부모 요소를 기준으로 한 비율입니다. 예를 들어 width: 50%;는 부모 너비의 절반을 뜻합니다. 부모가 커지면 자식도 그에 맞춰 커지므로, 유연한 배치에 유용합니다.

둘째, em은 글자 크기를 기준으로 한 단위입니다. 1em은 현재 요소의 글자 크기와 같고, 2em은 그 두 배입니다. 글자 크기에 비례해 여백 등을 정할 때 쓰입니다. 다만 부모의 글자 크기에 영향을 받아 계산이 복잡해질 수 있습니다.

셋째, rem은 em과 비슷하지만 기준이 다릅니다. rem은 언제나 문서 최상단(html)의 글자 크기를 기준으로 삼습니다. 기준이 하나로 고정되어 계산이 예측 가능하므로, 오늘날 크기 단위로 rem을 널리 권장합니다.

html { font-size: 16px; }  /* 기준: 1rem = 16px */
h1   { font-size: 2rem; }   /* 32px */
p    { font-size: 1rem; }   /* 16px */

정리하면, px는 고정, %는 부모 기준, em은 글자 기준, rem은 최상단 기준입니다. 처음에는 직관적인 px로 시작하고, 뒤에서 배울 반응형 디자인에 이르면 rem·%의 유연함이 왜 중요한지 자연스럽게 알게 됩니다.

⚠️ 자주 하는 실수

이 섹션에서는 색과 단위를 다룰 때 흔한 실수를 정리하겠습니다.

첫 번째, 단위를 빠뜨리는 것입니다. font-size: 16;처럼 단위 없이 숫자만 적으면 대부분 적용되지 않습니다. 크기 값에는 반드시 px·rem 같은 단위를 붙여야 합니다. (단, 줄 간격 등 일부 예외가 있지만 지금은 '단위를 붙인다'로 익히세요.)

두 번째, 16진수의 # 을 빠뜨리는 것입니다. color: ff0000;은 잘못이며 color: #ff0000;처럼 앞에 반드시 #을 붙여야 합니다. rgb는 반대로 #을 붙이지 않습니다.

세 번째, color와 background를 혼동하는 것입니다. 글자 색은 color, 배경 색은 background입니다. 배경을 바꾸려다 color를 쓰면 글자만 바뀌니, 둘의 역할을 정확히 구분하세요.

📝 핵심 요약

이번 강에서는 색상과 단위를 배웠습니다.

• color와 background — 글자 색은 color, 배경 색은 background(-color)로 지정합니다.
• 색 표현 — 이름(red), 16진수(#ff0000), rgb(255,0,0)로 색을 적으며, rgba는 투명도를 더합니다. #은 16진수에만 붙입니다.
• 절대 단위 px — 고정된 픽셀 크기로 직관적이며, 처음 배우기에 좋습니다.
• 상대 단위 — %는 부모 기준, em은 글자 기준, rem은 최상단 기준입니다. 예측 가능한 rem이 널리 권장됩니다.

이제 색과 크기라는 기본 재료를 다룰 수 있게 되었습니다. 다음 강에서는 이 재료들을 활용해 글자의 모양을 본격적으로 꾸미는 텍스트 스타일 속성들을 배우겠습니다. 다음 강 「텍스트 스타일」에서 이어가겠습니다.

📚 참고 자료

• CSS 색상 값(이름·16진수·rgb) — MDN Web Docs
• CSS 값과 단위 — MDN Web Docs
• CSS 단위(px·em·rem·%) 이해하기 — MDN Web Docs