시스매

CSS 단위 완벽 정복 핸드북 px부터 rem vw까지

23 min read

2025-09-23 20:39

  • CSS 단위는 웹 페이지의 크기와 레이아웃을 결정하는 핵심 요소로, 고정된 크기를 갖는 절대 단위와 주변 환경에 따라 변하는 상대 단위로 나뉨.

  • 현대 반응형 웹 디자인에서는 사용자의 환경에 유연하게 대응할 수 있는 rem, em, vw, vh 같은 상대 단위의 사용이 절대적으로 중요함.

  • 절대 단위 px는 정밀한 제어가 필요할 때, 상대 단위 rem은 전체적인 글꼴 및 간격의 일관성을, vw와 vh는 화면 크기에 꽉 채우는 레이아웃에 사용하는 등 상황에 맞는 전략적 선택이 필요함.

CSS 단위 완벽 정복 핸드북 px부터 rem vw까지

웹사이트를 건축하는 과정에서 ‘크기’를 정의하는 것은 가장 기본적이면서도 중요한 작업이다. 건물을 지을 때 밀리미터(mm)와 미터(m)를 정밀하게 사용하듯, 웹에서도 요소의 너비, 높이, 글자 크기, 여백 등을 결정하는 ‘단위’를 올바르게 이해하고 사용해야 한다. 과거에는 모든 것을 px(픽셀)이라는 절대적인 기준으로 재단했지만, 스마트폰부터 거대한 TV까지 웹에 접속하는 환경이 다양해지면서 이제는 하나의 단위만으로는 유연하고 아름다운 웹을 만들 수 없게 되었다.

이 핸드북은 CSS 단위의 세계를 탐험하는 당신을 위한 완벽한 안내서다. 단순히 각 단위의 정의를 나열하는 것을 넘어, 왜 이 단위들이 만들어졌는지, 각각의 단위가 어떤 구조적 특성을 가지며, 실전에서 어떻게 사용해야 하는지에 대한 깊이 있는 통찰을 제공한다. px의 시대에서 rem과 뷰포트 단위의 시대로 넘어가는 패러다임의 전환을 이해하고, 당신의 웹사이트를 한 단계 더 높은 수준으로 끌어올릴 준비를 하라.

1부 CSS 단위의 탄생 배경 왜 이렇게 다양해졌을까

초창기 웹은 지금처럼 화려하지 않았다. 대부분의 정보는 단순한 텍스트로 이루어져 있었고, 화면 크기 역시 640x480, 800x600 등으로 정해져 있었다. 이 시기에는 화면의 가장 작은 점 하나, 즉 **픽셀(pixel)**을 기준으로 크기를 정하는 px 단위가 절대적인 기준이었다. 마치 인쇄물에서 특정 글자 크기를 ‘12포인트’로 고정하는 것처럼, 웹에서도 font-size: 12px와 같이 고정된 크기를 사용하는 것이 당연했다.

하지만 기술이 발전하며 문제가 발생하기 시작했다. 화면 해상도는 점점 높아졌고, 사람들은 데스크톱뿐만 아니라 노트북, 그리고 마침내 스마트폰이라는 새로운 기기로 웹을 보기 시작했다. 24인치 모니터에서 적절해 보였던 12px 글자는 작은 스마트폰 화면에서는 너무 작아 보였고, 반대로 스마트폰에 맞춘 디자인은 데스크톱에서 초라해 보였다.

웹 개발자들은 이 문제를 해결하기 위해 ‘유연함’이 필요하다는 것을 깨달았다. 모든 것이 고정된 ‘절대적인’ 세계에서 벗어나, 주변 환경, 즉 부모 요소의 크기나 사용자의 화면(뷰포트) 크기에 따라 동적으로 변하는 ‘상대적인’ 단위의 필요성이 대두된 것이다.

이것이 바로 em, rem, %, vw, vh와 같은 상대 단위가 탄생하게 된 배경이다. 이들은 마치 딱딱한 자가 아니라, 늘어나는 고무줄처럼 작동한다. 주변 환경이 바뀌면 그에 맞춰 자신의 크기를 조절하며, 어떤 기기에서 보더라도 최적의 사용자 경험을 제공하는 **반응형 웹 디자인(Responsive Web Design)**의 핵심 철학을 담고 있다.

2부 절대적 기준의 지배자 절대 단위

상대 단위의 중요성이 커졌다고 해서 절대 단위가 쓸모없어진 것은 아니다. 절대 단위는 이름 그대로, 다른 어떤 요소에도 영향을 받지 않는 고정된 크기를 가진다. 이는 변하지 않는 정밀한 값을 원할 때 매우 유용하다.

단위이름설명
px픽셀(Pixels)화면의 물리적 픽셀에 대응하는 기본 단위. 1px은 화면의 점 하나를 의미하지만, 고해상도 디스플레이에서는 여러 개의 물리적 픽셀이 1개의 CSS 픽셀을 표현하기도 함.
pt포인트(Points)주로 인쇄 매체에서 사용. 1포인트는 1/72인치에 해당. (1in = 72pt)
in인치(Inches)1인치는 2.54센티미터. (1in = 2.54cm = 96px)
cm센티미터(Centimeters)우리에게 익숙한 미터법 단위.
mm밀리미터(Millimeters)우리에게 익숙한 미터법 단위.

픽셀 px 끝나지 않은 그의 시대

px는 가장 직관적이고 널리 사용되는 절대 단위다. 화면의 작은 점 하나를 기준으로 하므로 개발자가 예상한 그대로의 크기를 화면에 렌더링한다.

주요 사용처:

  1. 경계선(Borders) 및 구분선: border: 1px solid black; 처럼 두께가 변하지 않아야 하는 얇은 선을 표현할 때 적합하다.

  2. 이미지 크기: 고정된 크기의 이미지를 사용할 때.

  3. 정밀한 위치 제어: 디자인 시안을 그대로 코드로 옮길 때, 요소 간의 미세한 간격을 정확하게 맞추기 위해 사용될 수 있다.

주의할 점: px는 접근성 측면에서 단점을 가질 수 있다. 사용자가 브라우저의 기본 글꼴 크기를 변경하더라도 px로 지정된 글꼴 크기는 변하지 않는다. 이로 인해 저시력 사용자가 텍스트를 확대해서 보는 데 어려움을 겪을 수 있다. 따라서 전체 레이아웃이나 글꼴 크기에 px를 남용하는 것은 현대 웹 개발에서 지양되는 추세다.

인쇄용 단위 pt, cm 등

pt, in, cm 등은 물리적인 세계의 단위다. 화면보다는 인쇄될 때의 결과물을 제어하기 위해 주로 사용된다. 예를 들어, 웹 페이지를 프린터로 출력할 때 적용되는 스타일시트(@media print)에서 문서의 여백이나 글자 크기를 지정할 때 유용하다.

CSS

@media print {
  body {
    font-size: 12pt;
    margin: 1in;
  }
}

3부 유연함의 미학 상대 단위

상대 단위는 반응형 웹의 심장과 같다. 이들은 고정된 값이 아니라, 다른 값(기준)에 대한 비율로 크기가 결정된다. 이를 통해 다양한 화면 크기에 유연하게 대응하는 디자인을 만들 수 있다.

3.1 글꼴 상대 단위

글꼴 크기에 따라 다른 요소의 크기도 함께 조절되어야 디자인의 일관성이 유지된다. 글꼴 상대 단위는 바로 이 역할을 수행한다.

em 부모를 따라가는 단위

em은 해당 요소에 적용된 font-size를 기준으로 크기가 결정된다. 만약 font-size가 명시되지 않았다면, 부모 요소로부터 상속받은 font-size가 기준이 된다.

예를 들어, 부모 요소의 font-size가 16px이라면, 자식 요소의 width: 10em;은 16px * 10 = 160px이 된다.

CSS

.parent {
  font-size: 20px;
}

.child {
  /* 부모의 font-size 20px가 기준이 됨 */
  font-size: 1.2em; /* 20px * 1.2 = 24px */
  padding: 2em;   /* 자신의 font-size 24px가 기준이 됨! -> 24px * 2 = 48px */
}

em의 중첩 문제: em은 편리하지만, 요소가 중첩될수록 계산이 복잡해지는 단점이 있다. 마치 러시아의 인형 ‘마트료시카’처럼, 안으로 들어갈수록 부모의 영향을 계속 받아 크기가 의도치 않게 커지거나 작아질 수 있다.

rem 뿌리를 따르는 혁신가

rem (Root EM)은 em의 중첩 문제를 해결하기 위해 등장한 혁신적인 단위다. rem은 오직 **최상위 요소(root element), 즉 <html> 요소의 font-size**만을 기준으로 삼는다.

대부분의 브라우저는 <html>의 기본 font-size를 16px로 설정한다. 따라서 개발자가 이 값을 바꾸지 않는 한, 1rem = 16px 이다.

CSS

html {
  font-size: 16px; /* 기준점 설정 */
}

body {
  font-size: 1rem; /* 16px * 1 = 16px */
}

.title {
  font-size: 2rem; /* 16px * 2 = 32px */
  margin-bottom: 1rem; /* 16px * 1 = 16px */
}

.container {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

.container p {
  font-size: 1rem; /* 부모(.container)가 아닌 html 기준! -> 16px * 1 = 16px */
}

rem을 사용하면 문서 전체에 걸쳐 글꼴, 여백, 너비 등의 크기를 일관성 있게 관리할 수 있다. 예를 들어, 사용자의 접근성을 위해 전체 텍스트 크기를 키워야 할 때 <html>의 font-size만 조절하면 rem으로 지정된 모든 요소의 크기가 비례하여 커지므로 유지보수가 매우 편리하다.

ch와 ex 타이포그래피 전문가

  • ch: 현재 글꼴의 숫자 ‘0’ 문자의 너비를 기준으로 한다. 영문 고정폭 글꼴(monospace font)에서는 모든 문자의 너비가 같으므로 한 문자의 너비와 같다.

  • ex: 현재 글꼴의 알파벳 소문자 ‘x’의 높이를 기준으로 한다.

이 단위들은 주로 텍스트의 가독성을 높이기 위해 사용된다. 예를 들어, 한 줄에 너무 많은 글자가 들어가면 읽기 어려워지는데, max-width: 60ch; 와 같이 설정하여 한 줄의 최대 길이를 약 60자로 제한할 수 있다.

3.2 뷰포트 상대 단위

뷰포트(Viewport)는 웹 페이지가 사용자에게 보여지는 화면 영역, 즉 브라우저 창의 크기를 의미한다. 뷰포트 단위는 이 화면 영역을 기준으로 크기를 결정하므로, 화면 크기에 꽉 채우는 레이아웃이나 유동적인 디자인을 만들 때 매우 강력하다.

단위이름설명
vw뷰포트 너비(Viewport Width)뷰포트 너비의 1%에 해당하는 값. 100vw는 뷰포트 전체 너비.
vh뷰포트 높이(Viewport Height)뷰포트 높이의 1%에 해당하는 값. 100vh는 뷰포트 전체 높이.
vmin뷰포트 최소값(Viewport Minimum)뷰포트의 너비와 높이 중 더 작은 값의 1%.
vmax뷰포트 최대값(Viewport Maximum)뷰포트의 너비와 높이 중 더 큰 값의 1%.

주요 사용처:

  • 전체 화면 레이아웃: height: 100vh; 를 사용하면 사용자의 화면 높이에 꽉 차는 ‘Hero’ 섹션을 쉽게 만들 수 있다.

  • 유동적인 글꼴 크기: font-size: 5vw; 와 같이 설정하면, 화면 너비가 커질수록 글자도 함께 커지는 역동적인 타이포그래피를 구현할 수 있다.

  • 정방형 유지: vmin을 사용하면 화면 비율이 어떻게 변하든 항상 정사각형을 유지하는 요소를 만들 수 있다. width: 50vmin; height: 50vmin;

주의할 점: vh는 모바일 브라우저에서 주소창이나 하단 메뉴바가 나타나거나 사라질 때 실제 뷰포트 높이가 변하면서 레이아웃이 출렁이는 문제를 일으킬 수 있다. 최근에는 이를 보완하기 위한 새로운 단위(svh, lvh, dvh)가 등장하고 있다.

3.3 백분율 %

%는 em과 비슷하게 부모 요소를 기준으로 크기가 결정된다는 점에서 상대 단위다. 하지만 em이 font-size를 기준으로 하는 반면, %는 어떤 속성에 사용되느냐에 따라 기준이 달라진다.

  • width: 50%; → 부모 요소의 width 값의 50%

  • height: 50%; → 부모 요소의 height 값의 50%

  • line-height: 150%; → 해당 요소 자신의 font-size의 150%

  • left: 10%; → 포지셔닝의 기준이 되는 컨테이닝 블록(containing block) 너비의 10%

%는 전통적인 그리드 시스템이나 요소의 비율을 정의할 때 매우 유용하다.

4부 실전 사용 가이드 어떤 단위를 언제 써야 할까

이론을 알았으니 이제 실전이다. 상황별로 어떤 단위를 사용하는 것이 가장 효율적일까? 정답은 없지만, 현대 웹 개발에서 널리 받아들여지는 모범 사례는 다음과 같다.

대상추천 단위이유 및 설명
기본 글꼴 크기 (html 태그)% 또는 pxhtml { font-size: 100%; } (브라우저 기본 16px 유지) 또는 html { font-size: 62.5%; } (10px 기준으로 rem 계산을 편하게 하기 위한 트릭). 사용자의 글꼴 크기 설정을 존중하기 위해 px 고정은 피하는 것이 좋음.
일반 텍스트, 제목rem문서 전체의 기준점에 맞춰 크기가 조절되므로 일관성 유지에 탁월함. 사용자가 브라우저 글꼴 크기를 변경하면 함께 조절되어 접근성이 향상됨.
컴포넌트 내부 요소em버튼 내부의 아이콘처럼, 해당 컴포넌트의 글꼴 크기가 변할 때 그에 비례하여 크기가 조절되어야 하는 경우에 유용함. button { font-size: 1.2rem; } button .icon { width: 1em; }
주요 레이아웃, 간격 (margin, padding)rem글꼴 크기와 여백의 비율을 일관되게 유지하여 조화로운 디자인을 만들 수 있음. h1 { margin-bottom: 1.5rem; }
그리드, 컨테이너 너비%, fr부모 컨테이너에 맞춰 유동적으로 변해야 하는 레이아웃에 적합함. CSS Grid의 fr 단위는 사용 가능한 공간을 비율에 따라 나누는 데 매우 강력함.
전체 화면 섹션vw, vh화면 전체를 덮는 배경 이미지나 섹션을 만들 때 가장 직관적이고 효과적인 방법. section.hero { width: 100vw; height: 100vh; }
경계선, 얇은 선px크기가 변하지 않는 정밀한 시각적 요소를 표현할 때 가장 적합함. border: 1px solid #ccc;
미디어 쿼리 분기점em, rempx 대신 em이나 rem을 사용하면, 사용자가 브라우저에서 텍스트를 확대/축소할 때 그에 맞춰 레이아웃이 변경되어 더 나은 사용자 경험을 제공함. @media (min-width: 50em) { ... }

5부 심화 탐구 CSS 단위의 숨겨진 힘

단위를 개별적으로 사용하는 것을 넘어, 이들을 조합하고 활용하면 CSS의 잠재력을 최대한으로 끌어올릴 수 있다.

calc() 함수의 마법

calc() 함수는 서로 다른 단위를 사용해 덧셈, 뺄셈, 곱셈, 나눗셈을 할 수 있게 해주는 CSS의 계산기다. 이를 통해 고정값과 가변값을 조합한 정교한 레이아웃을 만들 수 있다.

CSS

.container {
  /* 뷰포트 전체 너비에서 고정된 100px을 뺀 만큼의 너비를 가짐 */
  width: calc(100% - 100px);
}

.header {
  /* 뷰포트 높이의 절반에 2rem을 더한 높이 */
  height: calc(50vh + 2rem);
}

단위 없는 ‘0’의 의미

CSS에서 0은 특별하다. 0px, 0rem, 0%는 모두 같은 0을 의미하기 때문에 단위를 붙일 필요가 없다. margin: 0; 처럼 단위를 생략하는 것이 더 깔끔한 코드다.

CSS 변수와 단위의 결합

CSS 변수(Custom Properties)를 사용하면 단위 값을 변수에 저장하여 재사용하고 관리하기 용이하게 만들 수 있다. 이를 통해 디자인 시스템의 일관성을 유지하고 테마를 쉽게 변경할 수 있다.

CSS

:root {
  --base-font-size: 1rem;
  --spacing-unit: 1.5rem;
}

body {
  font-size: var(--base-font-size);
}

.card {
  padding: var(--spacing-unit);
  border-radius: calc(var(--spacing-unit) / 2);
}

결론 유연한 미래를 위한 단위 선택

CSS 단위의 세계는 단순한 숫자와 기호의 나열이 아니다. 그것은 고정된 인쇄물에서 출발한 웹이 어떻게 다양한 스크린 환경에 적응하며 발전해왔는지를 보여주는 역사 그 자체다.

이제 우리는 px만으로 모든 것을 재단하던 시대를 지나, 콘텐츠와 사용자 환경에 따라 유연하게 변화하는 디자인을 추구해야 한다. rem을 중심으로 일관된 타이포그래피와 간격 시스템을 구축하고, %와 fr로 유동적인 그리드를 설계하며, vw와 vh로 화면을 가득 채우는 과감한 시도를 할 수 있어야 한다.

이 핸드북이 당신의 무기고에 강력한 무기를 더해주었기를 바란다. 어떤 단위를 선택할지 고민될 때마다 각 단위가 가진 철학과 배경을 떠올려보라. 상황에 맞는 최적의 단위를 선택하는 능력은 당신을 더 나은 웹 개발자로 만들어 줄 것이다. 이제, 유연하고 반응적인 미래를 향해 당신만의 설계를 시작하라.

그래프 뷰