개발자

🎨 CSS 단위 변환기

px·rem·em 단위 변환부터 clamp() 생성, aspect-ratio 계산까지. CSS에서 자주 헷갈리는 값을 한곳에서 변환하고 바로 복사하세요.

입력값

현재 단위

변환 결과

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

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 ❌

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 포맷터

정렬·압축·검증

🔡

글자수 세기

실시간 카운트