rem과 em의 차이는?

rem은 문서 루트(html font-size, 기본 16 px) 기준, em은 부모 요소 기준입니다. 부모가 루트와 같은 크기를 쓰는 경우에만 둘이 같아집니다.

CSS 정의: 1 in = 96 px, 1 pt = 1/72 in → 1 pt = 96/72 ≈ 1.333 px.

vw / vh는 정확한가요?

기본 크기 패널의 뷰포트 폭·높이를 사용합니다. 기본값 1440×900은 일반 데스크탑 기준이라 디자인 캔버스에 맞게 바꾸세요.

폰트 크기 맥락에선 부모 폰트 크기 기준(em과 동일). 다른 CSS 속성에선 해당 속성의 containing block 기준으로 달라집니다.

CSS 단위 변환기

변환

CSS 단위로 값을 입력하면 나머지 모든 단위로 즉시 변환합니다. rem 계산용 루트 폰트(기본 16 px), em·% 계산용 부모 폰트, vw·vh 계산용 뷰포트 폭/높이를 자유롭게 조정 가능. 디자인 값을 Tailwind / CSS로 옮길 때, 반응형 폰트 크기 점검, 기본 16 px이 아닐 때 1rem이 몇 px인지 확인할 때 유용합니다.

—

값단위

기본 크기 (루트·부모·뷰포트)

루트 폰트 (rem)부모 폰트 (em, %)뷰포트 폭 (vw)뷰포트 높이 (vh)

모든 단위

px16.000
rem1
em1
pt12.000
vw1.1111
vh1.7778
%100.00

사용법

값과 단위(px·rem·em·pt·vw·vh·%)를 입력하세요.
나머지 단위가 실시간으로 갱신됩니다.
'기본 크기' 패널을 펼쳐 루트/부모 폰트나 뷰포트를 바꿀 수 있습니다.
단위 옆 복사 버튼으로 값을 복사하세요.

자주 묻는 질문

rem과 em의 차이는?: rem은 문서 루트(html font-size, 기본 16 px) 기준, em은 부모 요소 기준입니다. 부모가 루트와 같은 크기를 쓰는 경우에만 둘이 같아집니다.
왜 1pt = 1.333px?: CSS 정의: 1 in = 96 px, 1 pt = 1/72 in → 1 pt = 96/72 ≈ 1.333 px.
vw / vh는 정확한가요?: 기본 크기 패널의 뷰포트 폭·높이를 사용합니다. 기본값 1440×900은 일반 데스크탑 기준이라 디자인 캔버스에 맞게 바꾸세요.
%는?: 폰트 크기 맥락에선 부모 폰트 크기 기준(em과 동일). 다른 CSS 속성에선 해당 속성의 containing block 기준으로 달라집니다.

CSS 단위 변환기

사용법

자주 묻는 질문

관련 도구

숫자 → 단어 변환

JSON ↔ YAML 변환기

데이터 용량 변환기

로마 숫자 변환기

진법 변환기

단위 변환기