CSS 단위 변환기

CSS 단위 핵심 공식 참조표

변환기는 어떤 단위로 입력하든 먼저 px로 바꾼 뒤(입력값 × 원래 단위의 기준) 각 단위의 기준으로 다시 나눕니다. 그래서 기준값 패널의 root·parent·viewport·부모 크기를 바꾸면 모든 행이 한꺼번에 다시 계산됩니다. 주의할 곳은 %입니다 — 같은 24px도 어느 속성이냐에 따라 기준이 달라집니다. 기본값(root·parent 16px, 뷰포트 1440×900, 부모 크기 100px)으로 계산하면 font-size 24px은 1.5rem · 150% · 1.6667vw · 2.6667vh이고, 같은 24px을 width로 보면 rem·vw 값은 그대로지만 %는 부모 크기 기준이라 24%가 됩니다.

px → rem 조견표 (root 16px)

아래 표는 root font-size 16px 기준의 px ÷ 16 산술입니다. 한 가지 주의 — 16px은 CSS 표준이 정한 수치가 아닙니다. W3C 명세(CSS Values Level 4)는 rem을 “루트 요소 font-size와 같다”로만 정의하고 숫자를 정하지 않으며, 16px은 주요 브라우저의 기본 글꼴 크기 관행이라 사용자 설정으로 바뀔 수 있습니다. rem을 쓰는 이유가 정확히 이 지점입니다 — 사용자가 브라우저 설정에서 기본 글꼴을 20px로 키우면 px로 고정한 텍스트는 그대로지만, rem으로 쓴 텍스트는 20 ÷ 16 = 1.25배로 함께 커져 사용자의 선택을 존중합니다.

13px = 0.8125rem처럼 암산이 지저분한 값도 표 그대로 쓰면 됩니다. 루트 font-size가 16px이 아닌 프로젝트라면 위 변환기에서 root 값을 바꿔 다시 계산하세요.

rem vs em 완전 비교

이 변환기의 em 계산은 ‘parent font-size’를 기준으로 합니다. font-size에 쓰는 em이라면 그대로 맞고, padding·margin처럼 다른 속성에 쓰는 em은 명세상 그 요소 자신의 font-size가 기준이므로 parent 칸에 해당 요소의 글자 크기를 넣고 계산하세요.

px→rem 62.5% 트릭(1rem = 10px)의 함정

html에 font-size: 62.5%를 선언하면 브라우저 기본 16px × 0.625 = 10px가 되어 1.6rem = 16px, 2.4rem = 24px처럼 암산이 쉬워집니다. 문제는 rem이 문서 전체에 적용되는 전역 기준이라는 점입니다. Shadow DOM 내부의 rem까지 예외 없이 바뀌므로, 1rem = 16px를 전제로 만들어진 서드파티 코드가 전부 62.5% 크기로 줄어듭니다.

타이포그래피·여백 기본값을 rem으로 정의한 Bootstrap 5, spacing 1단위 = 0.25rem인 Tailwind CSS, rem을 쓰는 임베드 위젯(댓글·결제창 등)이 대표적인 충돌 지점입니다. 게다가 이 트릭은 프로젝트 전체를 한 번에 바꾸는 일괄 전환만 가능해, 이미 rem이 섞인 코드베이스에 점진적으로 도입할 수 없습니다. 62.5%가 고정 font-size: 10px 선언보다 나은 점은 사용자의 브라우저 글꼴 크기 설정에 비례해 확대된다는 것 하나인데, 루트를 100%로 두어도 같은 이점을 얻습니다. 결론적으로 외부 CSS를 전부 통제할 수 없다면 루트를 100%(16px)로 유지하고 px ÷ 16 나눗셈은 변환기에 맡기는 편이 안전합니다 — 이 변환기의 root font-size 기본값이 16인 이유입니다.

Tailwind와 rem — spacing scale·임의값

Tailwind의 spacing 유틸리티는 rem 기반입니다. v3 공식 문서의 명문은 “spacing 1단위 = 0.25rem, 일반적인 브라우저 기본값에서 4px” — v4는 같은 결과를 테마 변수 --spacing: 0.25rem에 숫자를 곱하는 방식으로 만듭니다(2026-07 v3·v4 문서 기준). 단위가 rem이므로 위에서 본 ‘사용자 글꼴 설정 존중’이 유틸리티 전체에 자동으로 적용됩니다.

스케일에 없는 값은 대괄호 임의값(arbitrary value) 문법으로 즉석 생성합니다. 공식 문서 예시는 top-[117px]·text-[22px]이고, w-[13px]처럼 어느 유틸리티에나 같은 문법이 통하며 lg:top-[344px]처럼 반응형·상태 수정자와도 결합됩니다. 다만 공식 문서가 임의값을 소개하는 맥락 자체가 “배경 이미지를 딱 맞는 자리에 놓기 위해 top: 117px이 정말로 필요할 때” — 즉 1회용 탈출구입니다. 같은 값이 여러 곳에서 반복된다면 임의값을 복붙하기보다 테마 변수로 등록해 일반 유틸리티처럼 쓰는 편이 유지보수에 낫습니다.

clamp() 완전 가이드

clamp(최솟값, 선호값, 최댓값)은 뷰포트 크기에 따라 값을 부드럽게 변화시키면서도 안전한 상·하한을 보장합니다. 생성기는 두 점(최소 뷰포트에서 최솟값, 최대 뷰포트에서 최댓값)을 지나는 직선을 구해 선호값을 ‘rem + vw’ 형태로 적습니다.

검산: 기울기는 (32 − 16) ÷ (1440 − 360) = 0.0148…이므로 뷰포트가 100px 넓어질 때마다 글자는 1.4815px씩 커지고(그래서 선호값의 vw 계수가 기울기 × 100 = 1.4815vw), 절편은 16 − 0.0148… × 360 = 10.667px = 0.6667rem입니다. 뷰포트 900px이라면 10.667 + 0.014815 × 900 ≈ 24px로, 정확히 16과 32의 중간값이 나옵니다.

타이포 스케일 실전 — h1~캡션 clamp() 세트

위 선형 보간 공식을 실제 타이포 단계에 적용한 세트입니다. 뷰포트 기준은 360~1440px — 이 페이지 clamp() 생성기의 기본값과 같아서, 같은 px를 입력하면 아래와 동일한 코드가 나옵니다. CSS Values Level 4 정의대로 clamp(MIN, VAL, MAX)는 max(MIN, min(VAL, MAX))와 같은 값이므로, 선호값(가운데 vw 식)이 어떤 값이 되어도 결과는 항상 MIN~MAX 사이로 잘립니다. 이 등가식을 그대로 계산해 보면, 실수로 MIN을 MAX보다 크게 지정했을 때 바깥쪽 max()가 마지막에 적용되어 MIN이 이긴다는 것도 도출됩니다.

단계가 내려갈수록 vw 계수(기울기)가 작아지는 점에 주목하세요 — 본문·캡션은 360→1440px 전 구간에서 각각 2px·1px만 변합니다. 변화 폭이 이 정도로 작은 단계는 clamp() 없이 고정 rem으로 두는 선택도 실용적입니다. 큰 제목일수록 유동의 이득이 크고, 작은 글자일수록 고정이 단순합니다.

100vh 모바일 주소창 문제 — dvh·svh·lvh

모바일 브라우저의 주소창은 스크롤에 따라 나타났다 사라지지만, 기존 100vh는 주소창이 접힌 가장 큰 화면 기준으로 계산되는 경우가 대부분입니다. 그래서 첫 화면에서 100vh 요소의 하단 — 고정 버튼·CTA — 이 주소창에 가려지는 문제가 생깁니다. CSS Values Level 4는 이를 해결하는 세 가지 뷰포트 높이 단위를 추가했습니다.

기존 vh를 dvh로 바꿔야 하는 경우는 스크롤 중에도 요소가 항상 보이는 영역과 일치해야 할 때뿐입니다. dvh는 주소창이 움직일 때마다 다시 계산되므로 대형 레이아웃이나 font-size에 쓰면 스크롤 중 요소가 계속 늘었다 줄었다 합니다. 첫 화면 잘림만 문제라면 svh가 더 안정적입니다. px→vh 공식(px ÷ viewportHeight × 100)은 세 단위에 그대로 적용되며 기준 높이만 달라집니다.

aspect-ratio vs padding-top trick

padding-top 방식이 동작하는 이유는 CSS에서 세로 padding의 %도 부모의 너비를 기준으로 계산되기 때문입니다. 16:9라면 9 ÷ 16 × 100 = 56.25%, 4:3이라면 75%, 21:9라면 약 42.86%입니다. aspect-ratio는 너비나 높이 중 하나가 정해져 있을 때만 나머지를 계산하므로, 둘 다 고정값을 주면 비율이 무시된다는 점도 기억해 두세요.

line-height unitless 권장 이유

unitless(단위 없는) line-height는 자식 요소에 상속될 때 자식의 font-size로 재계산됩니다. 반면 em·%는 계산된 px값이 그대로 상속되어 의도와 달라질 수 있습니다.

Figma → CSS 변환 치트시트

Figma의 자간·행간은 font-size 대비 %로 표시되므로 CSS에서는 em(자간)이나 단위 없는 숫자(행간)로 옮기면 글자 크기를 바꿔도 비율이 유지됩니다. 행간을 px로 지정한 디자인(예: 16px 글자에 24px)은 나눗셈 결과를 단위 없이 쓰는 것이 위 line-height 절의 이유로 가장 안전합니다.