안녕하세요! 프론트엔드 개발자 취업을 향한 여정, 정말 응원합니다! CSS를 다루다 보면 px, em, rem, vh 등 수많은 단위를 만나게 되는데요. 이참에 이런 단위들이 CSS에서 정확히 어떤 데이터 타입으로 분류되고 어떻게 동작하는지 완벽하게 정리해 보는 것도 아주 좋은 공부가 될 겁니다.
이번 공식 문서도 내용 하나도 빠짐없이, 제가 실무에서 겪은 유용한 팁들을 팍팍 섞어서 구어체로 알기 쉽게 번역해 드릴게요!
숫자형 데이터 타입 (Numeric data types)
모든 CSS 선언은 속성(property)과 값(value)의 쌍으로 이루어집니다. 이 '값'에는 속성에 따라 다양한 데이터 타입이 들어갈 수 있는데, 단순한 숫자 하나일 수도 있고, 키워드나 함수, 혹은 여러 타입의 조합일 수도 있습니다. 어떤 값은 단위를 가지지만, 단위가 없는 값도 있죠.
숫자형 데이터 타입(Numeric data types)에는 <integer>(정수), <number>(숫자), <dimension>(단위가 있는 수치/치수), 그리고 <percentage>(백분율) 값들이 포함됩니다. 이 가이드는 숫자형 데이터 타입에 대한 전반적인 개요를 제공합니다. 각 값의 타입에 대한 더 자세한 정보는 해당 페이지를 참조하세요.
이 문서의 목차 (In this article)
- 정수 (Integers)
- 숫자 (Numbers)
- 치수 (Dimensions)
- 백분율과 치수의 혼합 (Mixing percentages and dimensions)
- 특수 데이터 타입 (다른 명세에서 정의됨) (Special data types)
- 함수 표기법 (Functional notation)
- 명세 (Specifications)
- 함께 보기 (See also)
정수 (Integers)
정수(integer)는 0부터 9까지의 십진수 숫자가 하나 이상 이어진 형태를 말합니다. 예를 들어 1024나 -55 같은 값이죠. 정수 앞에는 +나 - 기호가 붙을 수 있는데, 이때 기호와 숫자 사이에 공백(띄어쓰기)이 있어서는 안 됩니다.
숫자 (Numbers)
<number>는 실수(real number)를 나타냅니다. 정수처럼 소수점이 없을 수도 있고, 소수점 이하의 분수(fractional) 부분을 가질 수도 있습니다. 예를 들어 0.255, 128, -1.2 같은 값입니다. 숫자 앞에도 역시 +나 - 기호가 붙을 수 있습니다.
치수 (Dimensions)
<dimension>은 <number>(숫자) 뒤에 단위(unit)가 딱 붙어있는 형태를 말합니다. 45deg, 100ms, 10px 같은 값들이죠. 뒤에 붙는 단위 식별자는 대소문자를 구분하지 않습니다(case insensitive). 숫자와 단위 식별자 사이에는 절대로 공백이나 다른 문자가 들어가면 안 됩니다. 즉, 1 cm처럼 띄어쓰기를 하면 유효하지 않은 값이 됩니다.
CSS는 다음과 같은 것들을 지정하기 위해 치수(dimensions)를 사용합니다:
<length>(거리/길이 단위)<angle>(각도 단위)<time>(시간 단위)<frequency>(주파수 단위)<flex>(플렉스 단위)<resolution>(해상도 단위)
이 단위들은 아래의 하위 섹션들에서 모두 다루겠습니다.
거리 단위 (Distance units)
거리 단위(흔히 길이(length)라고도 부름)가 속성의 값으로 허용되는 경우, 이를 <length> 타입이라고 부릅니다. CSS에는 두 가지 유형의 길이가 있습니다: 바로 상대 길이(relative)와 절대 길이(absolute)입니다. 상대 길이 단위는 다른 어떤 기준(무언가)에 비례하여 길이를 지정합니다.
상대 길이는 크게 두 종류로 나뉩니다: '글꼴 상대 길이(font-relative lengths)'와 '뷰포트 백분율 길이(viewport-percentage lengths)'입니다. 이들 역시 각각 두 가지로 다시 나뉘는데요. 글꼴 상대 길이 단위는 '지역(local) 글꼴 기준'이거나 '루트(root) 글꼴 기준'입니다. 뷰포트 백분율 길이는 뷰포트의 높이나 너비 크기를 기준으로 하거나, CSS 컨테인먼트 모듈(CSS Containment module)에 정의된 컨테이너(container)를 기준으로 합니다.
지역 글꼴 상대 길이 (Local font-relative lengths)
지역 글꼴 상대 길이는 "현재 지역(local)"의 글꼴 크기나 줄 높이(line height)를 기준으로 합니다. 즉, 해당 요소(element) 자체가 가지고 있는 글꼴 특징의 계산된 크기를 기준으로 길이를 지정합니다. (단, font-size 속성에 em을 쓰거나 line-height 속성에 lh를 쓰는 것처럼 순환 참조(circular reference)가 발생하는 경우에는 부모로부터 상속받은 값을 기준으로 합니다.)
예를 들어, em은 요소의 글꼴 크기를 기준으로 하고, ex는 요소 글꼴의 소문자 x의 높이(x-height)를 기준으로 합니다.
| 단위 (Unit) | 기준 (Relative to) |
|---|---|
cap | 해당 요소 글꼴의 대문자 높이(Cap height) |
ch | 해당 요소 글꼴에서 좁은 글리프(glyph)의 평균적인 문자 너비 (일반적으로 "0"(숫자 영) 글리프의 너비) |
em | 해당 요소 글꼴의 글꼴 크기(font size) |
ex | 해당 요소 글꼴의 소문자 x 높이(x-height) |
ic | 해당 요소 글꼴에서 전각(full-width) 글리프의 평균적인 문자 너비 (일반적으로 한자 "水"(물 수) 글리프의 너비) |
lh | 해당 요소의 줄 높이(Line height) |
루트 글꼴 상대 길이 (Root font-relative lengths)
루트 글꼴 상대 길이는 해당 요소의 가장 최상위 조상인 루트 요소(root element)(예: <HTML>이나 <SVG>)와 관련된 길이를 지정합니다.
예를 들어, rem은 루트 요소의 글꼴 크기를 기준으로 하고, rex는 루트 요소 글꼴의 x-height를 기준으로 합니다.
| 단위 (Unit) | 기준 (Relative to) |
|---|---|
rcap | 루트 요소 글꼴의 대문자 높이(Cap height) |
rch | 루트 요소 글꼴에서 "0" 문자의 너비 |
rem | 루트 요소 글꼴의 글꼴 크기(font size) |
rex | 루트 요소 글꼴의 소문자 x 높이(x-height) |
ric | 루트 요소 글꼴에서 "水" 문자의 너비 |
rlh | 루트 요소의 줄 높이(Line height) |
💡 강사의 실무 팁 1:
emvsrem
실무에서 타이포그래피나 반응형 디자인을 할 때px대신rem을 정말 많이 사용합니다!em은 부모의 폰트 사이즈를 곱해서 계산하기 때문에 중첩될수록 눈덩이처럼 글씨가 커지거나 작아지는(복리 계산) 끔찍한 버그가 생길 수 있어요. 하지만rem(Root em)은 무조건<html>태그의 폰트 사이즈(보통 16px)만을 기준으로 계산되므로 훨씬 안전하고 예측 가능합니다. (예:1.5rem= 24px)
뷰포트 단위 (Viewport units)
뷰포트 단위 길이는 뷰포트(viewport, 화면에 보이는 영역)의 크기를 기준으로 한 길이를 지정합니다.
예를 들어, vw는 뷰포트 너비에 비례하고 vh는 뷰포트 높이에 비례합니다.
| 단위 (Unit) | 기준 (Relative to) |
|---|---|
dvh | 동적(dynamic) 뷰포트 높이의 1% |
dvw | 동적(dynamic) 뷰포트 너비의 1% |
lvh | 큰(large) 뷰포트 높이의 1% |
lvw | 큰(large) 뷰포트 너비의 1% |
svh | 작은(small) 뷰포트 높이의 1% |
svw | 작은(small) 뷰포트 너비의 1% |
vb | 루트 요소의 블록 축(block axis) 방향 뷰포트 크기의 1% |
vh | 뷰포트 높이의 1% |
vi | 루트 요소의 인라인 축(inline axis) 방향 뷰포트 크기의 1% |
vmax | 뷰포트 너비와 높이 중 더 큰 쪽의 1% |
vmin | 뷰포트 너비와 높이 중 더 작은 쪽의 1% |
vw | 뷰포트 너비의 1% |
💡 강사의 실무 팁 2: 모바일 브라우저의 구세주
dvh
모바일 사파리나 크롬에서100vh를 주면 주소창(상단/하단 바) 영역 때문에 스크롤이 생겨버리는 악명 높은 버그 겪어보셨나요? 이를 해결하기 위해 등장한 것이 바로dvh(Dynamic Viewport Height)입니다. 주소창이 줄어들면 같이 늘어나고, 나타나면 같이 줄어들어서 화면에 항상 완벽하게 꽉 차는 모바일 풀스크린 레이아웃을 만들 수 있는 혁명적인 단위입니다! 꼭 써보세요!
컨테이너 단위 (Container units)
컨테이너 쿼리(Container query) 길이 단위는 쿼리 컨테이너(query container)의 크기를 기준으로 한 길이를 지정합니다.
예를 들어, cqw는 쿼리 컨테이너의 너비를 기준으로 하고 cqh는 쿼리 컨테이너의 높이를 기준으로 합니다.
| 단위 (Unit) | 기준 (Relative to) |
|---|---|
cqb | 쿼리 컨테이너 블록 크기(block size)의 1% |
cqh | 쿼리 컨테이너 높이(height)의 1% |
cqi | 쿼리 컨테이너 인라인 크기(inline size)의 1% |
cqmax | cqi와 cqb 중 더 큰 값 |
cqmin | cqi와 cqb 중 더 작은 값 |
cqw | 쿼리 컨테이너 너비(width)의 1% |
절대 길이 단위 (Absolute length units)
절대 길이 단위는 물리적인 길이(인치 또는 센티미터)에 고정되어 있습니다. 따라서 이 단위들은 인쇄물(print)처럼 고정된 크기를 가진 출력 매체에서 훨씬 유용하게 쓰입니다. 예를 들어 mm은 실제 물리적인 밀리미터이며, 1센티미터의 1/10입니다.
| 단위 (Unit) | 이름 (Name) | 변환 (Equivalent to) |
|---|---|---|
cm | 센티미터 (Centimeters) | 1cm = 96px/2.54 |
in | 인치 (Inches) | 1in = 2.54cm = 96px |
mm | 밀리미터 (Millimeters) | 1mm = 1cm의 1/10 |
pc | 파이카 (Picas) | 1pc = 1in의 1/6 |
pt | 포인트 (Points) | 1pt = 1in의 1/72 |
px | 픽셀 (Pixels) | 1px = 1in의 1/96 |
Q | 쿼터 밀리미터 (Quarter-millimeters) | 1Q = 1cm의 1/40 |
길이 값을 넣을 때 값이 0이라면 뒤에 붙는 단위 식별자는 생략해도 됩니다(예: 0px 대신 그냥 0). 하지만 0이 아니라면 단위 식별자는 무조건 필수이며, 숫자 바로 뒤에 공백 없이 붙여 써야 합니다. (단위는 대소문자를 구분하지 않습니다.)
각도 단위 (Angle units)
각도(Angle) 값은 <angle> 타입으로 표현되며 다음 단위들을 허용합니다:
| 단위 (Unit) | 이름 (Name) | 설명 (Description) |
|---|---|---|
deg | 디그리/도 (Degrees) | 완전한 원(한 바퀴)은 360도입니다. (가장 많이 씁니다!) |
grad | 그라디안 (Gradians) | 완전한 원은 400그라디안입니다. |
rad | 라디안 (Radians) | 완전한 원은 2π 라디안입니다. |
turn | 턴/바퀴 (Turns) | 완전한 원은 1턴입니다. (예: 0.5turn = 반 바퀴) |
시간 단위 (Time units)
시간(Time) 값은 <time> 타입으로 표현됩니다. 시간 값을 넣을 때는 반드시 s나 ms 같은 단위 식별자를 붙여야 합니다.
| 단위 (Unit) | 이름 (Name) | 설명 (Description) |
|---|---|---|
ms | 밀리초 (Milliseconds) | 1초는 1,000 밀리초입니다. |
s | 초 (Seconds) | - |
주파수 단위 (Frequency units)
주파수(Frequency) 값은 <frequency> 타입으로 표현되며 다음 값을 허용합니다:
| 단위 (Unit) | 이름 (Name) | 설명 (Description) |
|---|---|---|
Hz | 헤르츠 (Hertz) | 초당 발생 횟수를 나타냅니다. |
kHz | 킬로헤르츠 (KiloHertz) | 1 킬로헤르츠는 1000 헤르츠입니다. |
1Hz는 초당 1주기를 의미하며 1hz나 1HZ로 적을 수도 있습니다.
플렉스 단위 (Flex units)
플렉스(Flex) 단위는 <flex> 타입으로 표현되며 다음 값을 허용합니다.
| 단위 (Unit) | 이름 (Name) | 설명 (Description) |
|---|---|---|
fr | 플렉스 (Flex) | 그리드(Grid) 컨테이너 내에서 남은 공간을 분할하는 유연한 길이를 나타냅니다. |
💡 강사의 실무 팁 3: Grid의 꽃
fr단위
fr(fraction)은 CSS Grid Layout에서 정말 유용한 녀석입니다!grid-template-columns: 1fr 2fr 1fr;라고 주면 전체 너비를 1:2:1의 비율로 기가 막히게 나눠주죠. 백분율(%)을 계산할 필요 없이 비율만 맞춰주면 브라우저가 알아서 픽셀을 나눠줍니다.
해상도 단위 (Resolution units)
해상도(Resolution) 단위는 <resolution> 타입으로 표현됩니다. 화면 같은 그래픽 표현에서 단일 점(dot)의 크기를 나타내며, CSS 상의 1인치, 1센티미터, 또는 1픽셀 안에 이런 점들이 몇 개나 들어가는지를 명시합니다.
| 단위 (Unit) | 설명 (Description) |
|---|---|
dpcm | 센티미터당 점의 수 (Dots per centimeter) |
dpi | 인치당 점의 수 (Dots per inch) |
dppx, x | px 단위당 점의 수 (Dots per px unit) |
백분율/퍼센트 (Percentages)
<percentage>는 어떤 다른 값의 일부분(비율)을 나타내는 타입입니다.
백분율 값은 항상 다른 기준이 되는 수량(예: 길이)에 상대적입니다. 백분율을 허용하는 각각의 CSS 속성은 그 백분율이 도대체 '무엇'을 기준으로 계산되는지도 함께 정의하고 있습니다. 이 기준량은 같은 요소의 다른 속성값이 될 수도 있고, 조상 요소의 속성값이 될 수도 있으며, 포함 블록(containing block)의 크기 측정이 될 수도 있습니다.
예를 들어 박스의 너비(width)를 퍼센트로 지정한다면, 이는 그 박스를 감싸고 있는 부모 요소의 계산된 너비에 대한 백분율을 의미합니다.
.box {
width: 50%; /* 부모 너비의 딱 절반 크기가 됩니다! */
}백분율과 치수의 혼합 (Mixing percentages and dimensions)
일부 속성들은 두 가지 타입 중 하나가 될 수 있는 치수를 허용합니다. 예를 들어 <length>(길이) 또는 <percentage>(백분율)을 모두 받을 수 있죠. 이런 경우, 명세에서는 이 허용된 값을 결합 단위(combination unit)로 상세히 기술합니다. (예: <length-percentage>). 다른 가능한 조합들은 다음과 같습니다:
특수 데이터 타입 (다른 명세에서 정의됨) (Special data types (defined in other specs))
색상 (Color)
<color> 값은 요소 특정 부분(예: 배경색)의 색상을 지정하며, CSS 컬러 모듈에 정의되어 있습니다.
이미지 (Image)
<image> 값은 CSS에서 사용될 수 있는 모든 다양한 유형의 이미지(그라데이션 포함)를 지정하며, CSS 이미지 값 및 대체 콘텐츠 모듈에 정의되어 있습니다.
위치 (Position)
<position> 타입은 포지셔닝 영역 내에서 객체의 2D 위치를 정의합니다 (예: 컨테이너 내부의 배경 이미지 위치). 이 타입은 background-position으로 해석되므로, CSS 배경 및 테두리 명세에 지정되어 있습니다.
함수 표기법 (Functional notation)
함수 표기법 (Functional notation)은 더 복잡한 타입을 나타내거나 CSS에 의한 특별한 연산을 호출할 수 있는 값의 한 종류입니다. 구문은 함수의 이름 바로 뒤에 여는 괄호 (가 오고, 그 뒤에 해당 표기법에 전달할 인수(arguments)들이 오며, 마지막으로 닫는 괄호 )로 끝나는 형태입니다. 함수는 여러 개의 인수를 받을 수 있으며, CSS 속성값과 유사한 형태로 서식이 지정됩니다.
괄호 안에서 공백(띄어쓰기)은 허용되며, 선택 사항입니다. (하지만 min(), max(), minmax(), clamp() 함수들 내의 공백에 대한 주의사항이 있으니 해당 문서를 꼭 참고하세요.)
과거에 쓰이던 일부 구형(legacy) 함수 표기법들, 예를 들어 rgb(), rgba(), hsl(), hsla()의 예전 문법에서는 쉼표(,)를 사용했습니다. 하지만 최신 문법에서는 쉼표는 일반적으로 리스트에서 항목들을 구분할 때만 사용합니다. 인수를 구분하기 위해 쉼표가 사용될 때, 쉼표 앞뒤의 공백은 선택 사항입니다.
명세에는 toggle() 함수도 정의되어 있지만, 아직 어떤 브라우저에도 구현되지 않았습니다.
명세 (Specifications)
| Specification (명세) |
|---|
| CSS Values and Units Module Level 4 |
함께 보기 (See also)
- 텍스트 데이터 타입 (Textual data types)
- CSS 데이터 타입 (CSS data types)
- CSS 값과 단위 (CSS values and units) 모듈
- 학습하기: 값과 단위 (Learn: Values and units)
MDN 향상에 도움 주기 (Help improve MDN)
- 이 페이지가 도움이 되셨나요? (Yes / No)
- MDN 기여 방법 알아보기 (Learn how to contribute)
- 마지막 수정일: 2025년 12월 16일 by MDN contributors
- GitHub에서 이 페이지 보기 (View this page on GitHub)
- 이 콘텐츠의 문제점 보고하기 (Report a problem with this content)
어떠신가요? 매일 무심코 쓰던 px, %, vh 같은 단위들이 어떻게 분류되어 있는지 체계가 잡히셨나요?
지금 만드시는 포트폴리오 웹사이트를 모바일에서도 완벽하게 보이게 하려면 rem과 dvh, fr 같은 최신 상대 단위들을 적극적으로 활용해 보세요! 반응형 대응이 훨씬 수월해질 겁니다.
이해가 안 가거나, 직접 코드를 짜다가 계산이 뜻대로 안 될 때(특히 calc() 함수 등) 언제든 질문해 주세요!
