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 / Tutorial / ul, ol 가운데 정렬하는 방법
목록 자체가 아니라 목록 안의 내용만 가운데 정렬할 때는 text-align 속성을 사용합니다. 목록 요소 자체를 가운데 정렬할 때는 margin 속성을 사용합니다. 만약 요소의 내용에 맞게 자동으로 크기가 정해지게 하고 싶으면 display 속성을 사용합니다.
같은 내용에 visible·hidden·auto·scroll을 적용해 넘침 처리를 비교합니다. 긴 URL 줄바꿈과 실제 말줄임표 예제를 실행하고, 원문 보존과 키보드 스크롤을 함께 확인합니다.
CSS / Tutorial / 마우스 호버 효과 / 서서히 길어지는 선 만드는 방법
마우스를 올리면 선이 그려지는 효과를 만들어봅니다. 다음과 같이 사각형을 만듭니다. :before를 이용하여 선이 시작하는 위치를 정합니다. position 속성으로 선 위에 선을 그릴 수 있도록 설정합니다.
CSS / Tutorial / 마우스 호버 효과 / 이미지 확대하는 방법
이미지에 마우스를 올렸을 때 이미지가 확대되는 효과를 만들어보겠습니다. 다음과 같이 이미지가 들어간 간단한 HTML 문서를 만듭니다.
테두리와 윤곽선의 차이, 둥근 모서리, 그림자의 이동·흐림·퍼짐을 설명합니다. 원·타원과 부모 영역에서 그림자가 잘리는 상황을 실제 예제로 비교합니다.
CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다.
웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.
CSS 강좌 / 박스 모델과 margin, padding, border 이해하기
콘텐츠·padding·border·margin의 위치와 너비 계산을 도해와 실행 예제로 설명합니다. 여백 축약 규칙과 세로 margin 합치기를 비교하고 개발자 도구에서 실제 크기를 확인합니다.
CSS / Tutorial / 마우스 호버 효과 / 다른 이미지 보여주는 방법
이미지에 마우스를 올렸을 때 다른 이미지가 나타나는 효과를 CSS로 만들어보겠습니다. 다음과 같이 이미지 두 개를 넣고 div로 감쌉니다.
CSS의 선택자·선언·구분 기호·주석을 예제로 설명합니다. 잘못된 속성값과 세미콜론 누락을 비교하고, 실행 가능한 예제와 오류 수정 실습으로 브라우저가 적용한 결과를 확인합니다.