CSS 강좌 / 색상 값과 px·em·rem·% 단위 이해하기
CSS의 색상은 색 이름, 16진수, RGB 등으로 표현할 수 있습니다. 길이는 px처럼 기준 크기를 쓰거나 em·rem·%처럼 다른 크기를 기준으로 계산합니다. 같은 숫자라도 단위와 속성이 다르면 결과가 달라지므로, 먼저 “무엇을 기준으로 계산하는가”를 확인해야 합니다.
색 이름·16진수·RGB는 어떻게 다를까요?
teal, #008080, rgb(0, 128, 128)은 같은 색을 표현합니다. 색 이름은 읽기 쉽지만 사용할 수 있는 이름이 정해져 있고, 16진수와 RGB는 빨강·초록·파랑의 양을 숫자로 조절하기 좋습니다. RGB는 Red, Green, Blue의 약자입니다.
| 표기 | 뜻 | 사용 예 |
|---|---|---|
| teal | 미리 정의된 색 이름 | color: teal; |
| #008080 | 빨강 00, 초록 80, 파랑 80을 16진수로 표시 | color: #008080; |
| rgb(0, 128, 128) | 세 성분을 0~255 숫자로 표시 | color: rgb(0, 128, 128); |
| rgb(0 128 128 / 20%) | 같은 색에 20% 불투명도를 지정 | background-color: rgb(0 128 128 / 20%); |
알파(alpha)는 색의 불투명도를 뜻합니다. 20%는 뒤의 색이 많이 비치는 상태이며 100%는 완전히 불투명한 상태입니다. 투명한 색의 최종 모습은 뒤에 깔린 색에 따라 달라집니다. 배경색에 알파를 주는 것과 요소 전체에 opacity를 주는 것은 다릅니다. 후자는 글자와 자식 요소까지 함께 흐려질 수 있습니다. 표기와 색의 관계는 MDN의 color 설명에서 확인할 수 있습니다.
px·em·rem의 기준을 구분하기
px는 CSS 픽셀입니다. 화면의 물리적인 픽셀 한 개와 항상 같지는 않으며, 화면 배율과 기기의 픽셀 밀도에 따라 표시 방식이 달라질 수 있습니다. 16px를 썼다고 화면 확대 기능이 작동하지 않는 것은 아닙니다.
em을 font-size에 사용하면 부모에게서 물려받는 글자 크기를 기준으로 합니다. 반면 padding: 1em은 그 요소 자신의 글자 크기를 기준으로 계산합니다. rem은 루트 요소인 html의 글자 크기를 기준으로 합니다. 아래 계산에서는 루트와 부모의 글자 크기가 모두 16px이라고 가정합니다.
| 선언과 조건 | 계산 | 결과 |
|---|---|---|
| 부모 16px에서 font-size: 1.25em | 16 × 1.25 | 20px |
| 루트 16px에서 font-size: 1.25rem | 16 × 1.25 | 20px |
| 자신의 글자 20px에서 padding: 1em | 20 × 1 | 각 방향 20px |
| 루트 16px에서 padding: 1rem | 16 × 1 | 각 방향 16px |
부모 크기가 커지는 단계마다 font-size: 1.25em을 반복하면 16 → 20 → 25px로 커집니다. 같은 구조에 1.25rem을 반복하면 두 단계 모두 20px입니다. 주변 글자에 비례해야 하는 작은 구성 요소에는 em이 편리하고, 페이지에서 일정한 기준을 공유하려면 rem이 편리합니다. 절대적인 정답보다는 어떤 기준을 따라야 하는지로 선택하세요. 단위의 정의는 MDN의 CSS 값과 단위 안내를 참고하세요.
% 너비는 어느 부분의 절반일까요?
width: 50%는 보통 포함 블록의 내용 너비를 기준으로 계산합니다. 모든 속성의 %가 같은 대상을 기준으로 하는 것은 아닙니다. 예를 들어 font-size: 125%는 부모에게서 물려받는 글자 크기를 기준으로 하므로 width의 %와 구분해야 합니다.
.wrapper { width: 100%; max-width: 640px; padding: 1rem; }
.inner { width: 50%; font-size: 1.25rem; padding: 1em; }
전체 예제는 box-sizing: border-box로 지정한 너비 안에 안쪽 여백을 포함합니다. 안쪽 여백은 padding이며 내용과 상자 경계 사이의 공간입니다. 루트가 16px이고 화면이 충분히 넓으면 바깥 상자 전체 너비는 640px, 좌우 padding은 각각 16px, 내용 너비는 608px입니다. 안쪽 상자의 너비는 608 × 0.5 = 304px입니다. 안쪽 상자의 좌우 padding은 각각 20px이므로 그 내용 너비는 264px입니다. 테두리는 없는 조건입니다.
화면이 좁으면 바깥 상자의 너비도 줄어듭니다. 이때 안쪽 너비는 304px로 고정되지 않고 바깥 상자의 새 내용 너비에 따라 다시 계산됩니다. 예제의 max-width는 상자가 640px보다 넓어지지 않도록 제한하는 보조 설정입니다.
복사해서 실행하는 전체 예제
아래 코드를 UTF-8로 저장한 units.html에 넣고 브라우저에서 여세요. 코드에는 색상 비교, 중첩 단위, 너비 계산을 모두 포함했습니다. 루트의 100%는 브라우저의 기본 글자 크기를 따르므로 아래 실습의 16px 조건은 개발자 도구에서 먼저 확인합니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>색상과 단위 비교</title>
<style>
html { font-size: 100%; }
* { box-sizing: border-box; }
body { margin: 16px; font-family: sans-serif; line-height: 1.7; }
.wrapper { width: 100%; max-width: 640px; padding: 1rem; background: #e9f7ef; }
.inner { width: 50%; padding: 1em; font-size: 1.25rem; background: white; }
.color-name { color: teal; }
.color-hex { color: #008080; }
.color-rgb { color: rgb(0, 128, 128); }
.alpha { padding: 1rem; background: rgb(0 128 128 / 20%); }
.nest { font-size: 16px; }
.em-step { font-size: 1.25em; }
.rem-step { font-size: 1.25rem; }
</style>
</head>
<body>
<h1>색상과 단위</h1>
<h2>같은 색상의 세 가지 표기</h2>
<p class="color-name">teal로 지정한 글자</p>
<p class="color-hex">#008080으로 지정한 글자</p>
<p class="color-rgb">rgb(0, 128, 128)로 지정한 글자</p>
<p class="alpha">이 상자의 배경색만 20% 불투명도입니다.</p>
<h2>너비와 여백</h2>
<div class="wrapper"><div class="inner">안쪽 상자의 글자와 여백</div></div>
<h2>중첩된 em</h2>
<div class="nest"><div class="em-step">첫 단계<div class="em-step">두 번째 단계</div></div></div>
<h2>중첩된 rem</h2>
<div class="nest"><div class="rem-step">첫 단계<div class="rem-step">두 번째 단계</div></div></div>
</body>
</html>
값을 하나씩 바꾸고 결과 확인하기
- 개발자 도구에서 html의 계산된 font-size를 확인합니다. 16px이라면 중첩 em은 20px·25px, 중첩 rem은 20px·20px인지 확인하세요. 다른 기본 크기라면 같은 배수로 계산합니다.
- html을 잠시 font-size: 20px로 바꿉니다. rem 글자는 모두 25px이 되고, .nest는 명시한 16px을 유지하므로 em 단계는 20px·25px입니다. .inner의 padding은 25px이 됩니다. 비교 후 원래 100%로 되돌립니다.
- 창을 넓게 한 뒤 .wrapper와 .inner의 상자 크기를 확인합니다. 원래 16px 조건에서는 640px·304px입니다. 창을 좁히면 양쪽이 함께 줄어드는지 확인하세요.
- 세 색상 문단의 계산된 color를 확인합니다. 모두 같은 RGB 값이어야 합니다. .alpha의 배경을 바꾸어도 글자 자체가 흐려지지 않는지 확인하세요.
예상과 다르면 단위만 바꾸기 전에 계산 기준을 확인하세요. 부모와 루트의 글자 크기, padding, box-sizing, 더 우선하는 CSS 규칙이 영향을 줄 수 있습니다. 개발자 도구에서 바꾼 값은 보통 새로고침하면 사라지고, 파일에 저장한 변경은 직접 원래 값으로 되돌려야 합니다.
CSS 강좌 / 상속·우선순위·캐스케이드로 최종 스타일 결정하기
상속과 직접 지정의 차이부터 중요도·선택자 우선순위·작성 순서까지 단계별로 판단합니다. 같은 문단의 색상·여백·테두리를 예측하는 전체 예제와 !important·인라인 스타일의 비교 실습을 제공합니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
표의 자동·고정 레이아웃, 30:70 열 너비, 긴 문자열의 영향을 같은 데이터로 비교합니다. 모바일 가로 스크롤과 키보드 이동을 확인하고 말줄임 원문을 보존하는 방법을 설명합니다.
CSS / Tutorial / placeholder의 색, 글자 모양 등 꾸미는 방법
placeholder는 HTML5에서 새로 나온 속성으로 input 요소나 textarea 요소에 안내문을 넣을 수 있습니다. 기본 모양은 회색의 글자로, 배경색이 하얀색 또는 밝은 색이면 보기에 괜찮습니다. 하지만 배경색이 어두운 색이거나 화려한 색이면 회색 글자가 어울리지 않을 수 있습니다. placeholder는 ::placeholder 선택자로 선택하여 꾸밀 수 있습니다.
테두리와 윤곽선의 차이, 둥근 모서리, 그림자의 이동·흐림·퍼짐을 설명합니다. 원·타원과 부모 영역에서 그림자가 잘리는 상황을 실제 예제로 비교합니다.
같은 내용에 visible·hidden·auto·scroll을 적용해 넘침 처리를 비교합니다. 긴 URL 줄바꿈과 실제 말줄임표 예제를 실행하고, 원문 보존과 키보드 스크롤을 함께 확인합니다.
CSS / Tutorial / 원 또는 타원 만드는 방법
CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. border-radius 속성을 추가하고, 값에 50%를 넣으면 원이 만들어집니다.
CSS 강좌 / display와 기본 배치 흐름 이해하기
block·inline·inline-block의 줄바꿈과 크기 적용을 같은 요소로 비교합니다. display: none과 visibility: hidden의 공간 차이, 인라인 이미지의 크기 예외를 실행하며 확인합니다.
글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다.
CSS 강좌 / ::before와 ::after로 가상 요소 꾸미기
::before와 ::after로 HTML을 늘리지 않고 장식용 점과 선을 추가합니다. content·display·currentColor의 역할, 실제 적용 전후 화면, 전체 코드와 가상 요소가 안 보일 때의 점검 방법을 설명합니다.