개발자

CSS 단위 변환기

Q: rem과 em의 차이는 무엇인가요?

rem은 root 요소(html)의 font-size를 기준으로, em은 부모 요소의 font-size를 기준으로 합니다. 중첩된 컴포넌트에서 em은 누적 계산되어 예상과 다른 결과가 나올 수 있어 일관성이 필요한 경우 rem을 권장합니다.

Q: line-height에 unitless가 권장되는 이유는?

line-height: 1.5처럼 단위 없는 값은 자식 요소에 상속될 때 자식의 font-size를 기준으로 재계산됩니다. 반면 em이나 %는 계산된 px값이 그대로 상속되어 자식의 font-size가 다를 때 의도와 다른 결과가 나올 수 있습니다.

Q: clamp()에서 vw 단위만 쓰면 안 되나요?

font-size: 2vw처럼 vw만 쓰면 최솟값·최댓값 제한이 없어 매우 좁거나 넓은 화면에서 글자가 너무 작거나 커집니다. clamp(min, preferred, max)로 안전한 범위를 설정하는 것이 권장됩니다.

Q: letter-spacing에 % 단위를 쓸 수 있나요?

CSS 명세상 letter-spacing은 % 단위를 공식 지원하지 않습니다. 실무에서는 em 단위를 권장합니다. 1em = font-size와 같은 크기이므로 font-size가 변경되어도 자간 비율이 자동으로 유지됩니다.

Q: aspect-ratio와 padding-top 방식 중 어느 것을 써야 하나요?

IE를 지원하지 않는다면 aspect-ratio가 훨씬 직관적이고 권장됩니다. IE 지원이 필요하거나 레거시 코드를 다룬다면 padding-top 방식을 사용하세요. 이 계산기에서 두 방법의 코드를 모두 확인하고 복사할 수 있습니다.

px·rem·em 변환 + clamp()·aspect-ratio 자동 생성.

입력값

현재 단위

변환 결과

root 16px · parent 16px · viewport 1440×900 · base 100px 기준

CSS 속성

단위	결과값	CSS 선언
px	24px	font-size: 24px;
rem	1.5rem	font-size: 1.5rem;
em	1.5em	font-size: 1.5em;
%	24%	font-size: 24%;
vw	1.6667vw	font-size: 1.6667vw;
vh	2.6667vh	font-size: 2.6667vh;

알아두면 좋아요

CSS 단위 핵심 공식 참조표

변환	공식	예시 (root 16px)
px → rem	px ÷ rootFontSize	24px = 1.5rem
rem → px	rem × rootFontSize	1.5rem = 24px
px → em	px ÷ parentFontSize	24px = 1.5em
px → %	(px ÷ base) × 100	24px ÷ 16px = 150%
px → vw	(px ÷ viewportWidth) × 100	24px ÷ 1440px ≈ 1.67vw
px → vh	(px ÷ viewportHeight) × 100	24px ÷ 900px ≈ 2.67vh

rem vs em 완전 비교

항목	rem	em
기준	root(html) font-size	부모 요소 font-size
상속	일관성 유지	중첩 시 누적되어 복잡
사용처	전역 크기 조절	컴포넌트 내부 상대 크기
추천 상황	font-size, spacing	아이콘, 버튼 내부 padding

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% 크기로 줄어듭니다.

html { font-size: 62.5%; }    /* 1rem = 10px */

/* 내 코드 — 의도대로 */
h1   { font-size: 3.2rem; }   /* 32px ✅ */

/* 1rem = 16px 전제의 서드파티 — 함께 축소 */
.btn { font-size: 1rem; }     /* 기대 16px → 실제 10px ❌ */
.p-4 { padding: 1rem; }       /* Tailwind 4단위, 기대 16px → 10px ❌ */

타이포그래피·여백 기본값을 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인 이유입니다.

clamp() 완전 가이드

clamp(최솟값, 선호값, 최댓값)은 뷰포트 크기에 따라 값을 부드럽게 변화시키면서도 안전한 상·하한을 보장합니다.

/* 선호값 계산 (선형 보간) */
slope     = (maxPx - minPx) / (maxVw - minVw)
intercept = minPx - slope × minVw
preferred = `${intercept/16}rem + ${slope*100}vw`

/* 결과 예시 */
clamp(1rem, 0.5rem + 2.22vw, 2rem)
  → 360px 화면:  16px  (최솟값)
  → 1440px 화면: 32px  (최댓값)
  → 그 사이:     부드럽게 변화

Chrome 79+Firefox 75+Safari 13.1+IE ❌

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

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

단위	기준	적합한 곳
100svh	주소창이 모두 표시된 가장 작은 화면	첫 화면 히어로·하단 고정 버튼 — 절대 가려지지 않음
100lvh	주소창이 접힌 가장 큰 화면	배경·장식 레이어 — 기존 모바일 100vh와 사실상 동일
100dvh	지금 실제로 보이는 높이(실시간 변동)	풀스크린 모달·채팅 입력창 — 스크롤 중 리사이즈 주의

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

/* 구형 브라우저 폴백 — 아랫줄이 지원되면 덮어씀 */
.hero { height: 100vh; height: 100dvh; }

Chrome 108+Firefox 101+Safari 15.4+

aspect-ratio vs padding-top trick

✨ 최신 방법 (aspect-ratio)

.box { aspect-ratio: 16 / 9; }

장점: 직관적, 코드 단순, 자식 배치 자유
단점: IE 미지원

🛡️ 구형 방법 (padding-top)

.wrapper {
  position: relative;
  padding-top: 56.25%;
}
.content {
  position: absolute;
  inset: 0;
}

장점: 모든 브라우저 지원
단점: 코드 복잡, absolute 포지셔닝 필요

line-height unitless 권장 이유

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

/* 부모 */
.parent { font-size: 20px; line-height: 1.5; }
/* 자식 */
.child  { font-size: 12px; }

/* unitless (1.5)   → 자식 line-height = 12px × 1.5 = 18px  ✅ */
/* em (1.5em)       → 자식 line-height = 20px × 1.5 = 30px  ❌ (부모 값 그대로 상속) */
/* % (150%)         → 자식 line-height = 20px × 1.5 = 30px  ❌ */

Figma → CSS 변환 치트시트

Figma 표기	CSS 변환
letter-spacing 5%	letter-spacing: 0.05em
line-height 150%	line-height: 1.5
font/line = 24/16	line-height: 1.5
width ratio 16:9	aspect-ratio: 16/9
corner 8	border-radius: 8px

자주 묻는 질문 (FAQ)

Q1. rem과 em의 차이는 무엇인가요?

rem은 root 요소(html)의 font-size를 기준으로, em은 부모 요소의 font-size를 기준으로 합니다. 중첩된 컴포넌트에서 em은 누적 계산되어 예상과 다른 결과가 나올 수 있어 일관성이 필요한 경우 rem을 권장합니다.

Q2. line-height에 unitless가 권장되는 이유는?

line-height: 1.5처럼 단위 없는 값은 자식 요소에 상속될 때 자식의 font-size를 기준으로 재계산됩니다. 반면 em이나 %는 계산된 px값이 그대로 상속되어 자식의 font-size가 다를 때 의도와 다른 결과가 나올 수 있습니다.

Q3. clamp()에서 vw 단위만 쓰면 안 되나요?

font-size: 2vw처럼 vw만 쓰면 최솟값·최댓값 제한이 없어 매우 좁거나 넓은 화면에서 글자가 너무 작거나 커집니다. clamp(min, preferred, max)로 안전한 범위를 설정하는 것이 권장됩니다.

Q4. letter-spacing에 % 단위를 쓸 수 있나요?

CSS 명세상 letter-spacing은 % 단위를 공식 지원하지 않습니다. 실무에서는 em 단위를 권장합니다. 1em = font-size와 같은 크기이므로 font-size가 변경되어도 자간 비율이 자동으로 유지됩니다.

Q5. aspect-ratio와 padding-top 방식 중 어느 것을 써야 하나요?

IE를 지원하지 않는다면 aspect-ratio가 훨씬 직관적이고 권장됩니다. IE 지원이 필요하거나 레거시 코드를 다룬다면 padding-top 방식을 사용하세요. 이 계산기에서 두 방법의 코드를 모두 확인하고 복사할 수 있습니다.

함께 쓰면 좋은 도구

🎨

색상 코드 변환기

HEX·RGB·HSL 변환

🔐

Base64 인코더

텍스트 ↔ Base64

📋

JSON 포맷터

정렬·압축·검증

🔡

글자수 세기

실시간 카운트