CSS 단위 변환기
위쪽 한 줄에 값과 단위를 넣으면, 아래에 px·rem·em·%·vw 등 모든 CSS 단위 값과 실제 크기 미리보기가 바로 나옵니다.
입력
값을 입력하면 모든 단위가 자동으로 변환됩니다.
결과
모든 값은 px로 환산한 뒤 각 단위로 다시 계산합니다. rem은 루트 글꼴 크기, em·%는 요소(부모) 글꼴 크기를 기준으로 하고, vw·vh·vmin·vmax는 뷰포트, pt·pc·in·cm·mm는 96px = 1in 표준을 씁니다.
바로 쓸 수 있게.
- 바로 보이는 화면입력 위치와 결과 위치를 또렷하게 둡니다.
- 결과 먼저핵심 결과를 앞에 두고, 과정은 필요할 때만 보여줍니다.
- 요구 줄이기가입이나 불필요한 정보 입력 없이 바로 쓰게 합니다.
CSS 단위, px와 rem 사이에서 길을 잃지 않기
CSS 단위 변환기는 “이 크기를 다른 단위로 쓰면 얼마일까”를 한눈에 보여 주는 도구입니다. 화면 위쪽 한 줄에 값과 단위를 넣으면, 아래에 px·rem·em·%·vw를 비롯한 모든 CSS 길이 단위 값이 동시에 바뀌고, 실제 픽셀 길이와 글자 크기 미리보기까지 함께 나옵니다.
단위 사이의 관계는 기준 글꼴 크기(보통 16px)와 화면 크기(뷰포트)에 따라 달라집니다. 그래서 이 도구는 입력값을 먼저 px로 환산한 뒤 각 단위로 다시 계산하고, 기준 글꼴과 뷰포트를 바꾸면 결과가 그 자리에서 다시 계산됩니다.
CSS 단위가 왜 이렇게 많은가
CSS 길이 단위는 크게 절대 단위와 상대 단위로 나뉩니다. 절대 단위(px·pt·cm 등)는 값이 고정돼 있고, 상대 단위(rem·em·%·vw 등)는 무언가를 기준으로 계산됩니다. 반응형 웹에서는 화면과 사용자 설정에 맞춰 크기가 늘고 줄어야 해서 상대 단위를 많이 씁니다.
- 절대 단위: px, pt, pc, in, cm, mm
- 상대 단위(글꼴 기준): rem, em, %
- 상대 단위(화면 기준): vw, vh, vmin, vmax
이 도구가 값을 변환하는 방법
입력한 값을 먼저 px(픽셀)로 환산한 뒤, 그 px를 다시 각 단위로 나눠 결과를 만듭니다. 그래서 어떤 단위로 넣어도 나머지 모든 단위가 한 번에 채워집니다. 값이 바뀌면 계산 버튼 없이 바로 갱신됩니다.
- px 환산 = 값 × (단위 1개당 px)
- rem은 루트 글꼴, em·%는 요소(부모) 글꼴이 결정
- vw·vh 는 뷰포트 크기가 결정
px · rem · em의 차이
px는 고정 픽셀, rem은 “루트(html) 글꼴 크기”의 배수, em은 “자기(또는 부모) 요소 글꼴 크기”의 배수입니다. 접근성 면에서는 사용자가 브라우저 글꼴 크기를 키우면 rem·em이 함께 커지지만 px는 그대로라, 글자 크기에는 보통 rem을 권장합니다. 이 도구는 rem을 루트 글꼴 크기 칸, em을 요소 글꼴 크기 칸을 기준으로 계산하므로, 두 칸을 다르게 두면 rem과 em 값이 서로 달라집니다.
- px: 항상 같은 크기(사용자 설정 무시)
- rem: 루트 글꼴 크기 × 값 (16px 기준 1rem = 16px)
- em: 요소 글꼴 크기 × 값 (요소 글꼴이 16px면 1em = 16px)
%는 무엇의 퍼센트인가
%는 “무엇을 기준으로 하느냐”에 따라 값이 완전히 달라집니다. font-size의 %는 부모 글꼴 크기 기준, width의 %는 부모 너비 기준, line-height의 %는 자기 글꼴 크기 기준입니다. 이 도구는 글꼴 계열 변환을 위해 %를 요소(부모) 글꼴 크기 기준으로 계산합니다(100% = 요소 글꼴 크기). 너비의 %처럼 다른 기준이 필요하면 그 맥락에 맞게 해석해야 합니다.
vw · vh · vmin · vmax — 화면 단위
뷰포트 단위는 브라우저 화면 크기를 기준으로 합니다. 1vw는 화면 너비의 1%, 1vh는 화면 높이의 1%이고, vmin은 너비·높이 중 작은 쪽, vmax는 큰 쪽의 1%입니다. 그래서 이 도구에서는 뷰포트 너비·높이를 바꾸면 vw·vh 결과가 달라집니다.
- 1vw = 뷰포트 너비 ÷ 100
- 1vh = 뷰포트 높이 ÷ 100
- vmin/vmax = 짧은/긴 변 ÷ 100
pt · pc · in · cm · mm — 물리 단위
CSS에서 물리 단위는 화면에서도 96px = 1in 규칙으로 환산됩니다. 즉 1in = 96px, 1cm ≈ 37.8px, 1mm ≈ 3.78px, 1pt = 1/72in ≈ 1.333px, 1pc = 12pt = 16px입니다. 주로 인쇄용 스타일시트에서 쓰지만 화면에서도 이 비율로 변환됩니다.
- 1in = 96px
- 1pt = 96/72 ≈ 1.333px
- 1pc = 16px, 1cm ≈ 37.8px, 1mm ≈ 3.78px
기준 글꼴 16px와 rem 계산 예시
브라우저 기본 글꼴 크기는 대부분 16px입니다. 그래서 24px을 rem으로 바꾸면 24 ÷ 16 = 1.5rem이 됩니다. 반대로 1.5rem은 16 × 1.5 = 24px입니다. 이 도구에서 기준 글꼴 크기를 20으로 바꾸면 같은 24px이 1.2rem으로 다시 계산됩니다.
반응형에서 어떤 단위를 언제 쓰나
정답은 없지만 흔한 기준이 있습니다. 글자 크기는 사용자 설정을 존중하도록 rem, 여백·간격은 rem이나 px, 요소 너비는 %나 뷰포트 단위, 큰 히어로 텍스트는 clamp()와 vw를 섞어 쓰는 식입니다. 미디어쿼리 기준값에는 보통 em을 씁니다.
- 글자 크기: rem (접근성)
- 여백/간격: rem 또는 px
- 레이아웃 너비: % 또는 vw
- 유동 크기: clamp() + vw
흔한 실수와 한계
em은 중첩되면 값이 누적돼 예상보다 커지거나 작아질 수 있습니다. 또 브라우저 기본 글꼴이 16px이 아닐 수도 있고(사용자 설정), 물리 단위의 실제 크기는 화면 DPI와 정확히 일치하지 않습니다. 이 도구의 결과는 소수점을 반올림한 값이라, 픽셀 단위로 딱 떨어지지 않을 때는 rem/em 소수를 그대로 쓰는 편이 안전합니다.
- em 중첩 누적 주의
- 브라우저 기본 글꼴은 사용자가 바꿀 수 있음
- 물리 단위는 화면에서 근사값
- 소수점 반올림 오차 존재
값 복사해서 바로 쓰기
각 단위 카드에 마우스를 올리거나 포커스하면 복사 버튼이 나타납니다. 누르면 “1.5rem”처럼 단위까지 붙은 문자열이 클립보드에 담겨 CSS에 바로 붙여 넣을 수 있습니다. 자주 쓰는 기준 글꼴·뷰포트 값을 먼저 맞춰 두면 이후 변환이 모두 그 기준으로 계산됩니다.
- 단위 카드 복사 = 값 + 단위
- 기준 글꼴/뷰포트를 먼저 설정
- 예시 버튼으로 24px 샘플 확인
CSS 단위 변환 자주 묻는 질문
px를 rem으로 어떻게 바꾸나요?
px 값을 기준 글꼴 크기로 나누면 됩니다. 기준이 16px일 때 24px ÷ 16 = 1.5rem입니다. 이 도구는 값에 px를 넣으면 rem을 포함한 모든 단위를 자동으로 계산하고, 기준 글꼴 크기를 바꾸면 결과도 다시 계산됩니다.
rem과 em의 차이는 무엇인가요?
rem은 항상 루트(html) 글꼴 크기를 기준으로 하고, em은 자기 요소(또는 부모)의 글꼴 크기를 기준으로 합니다. 그래서 em은 중첩되면 값이 누적됩니다. 이 도구는 계산을 단순하게 하려고 em을 기준 글꼴 크기 기준으로 보여 줍니다.
기준 글꼴 크기는 왜 16인가요?
대부분의 브라우저 기본 글꼴 크기가 16px이기 때문입니다. 그래서 1rem = 16px이 기본값입니다. 사용자가 브라우저 설정을 바꾸거나 CSS로 html 글꼴 크기를 조정하면 달라지며, 이 도구에서는 기준 글꼴 크기 칸에서 직접 바꿀 수 있습니다.
%는 무엇을 기준으로 계산되나요?
CSS에서 %는 속성마다 기준이 다릅니다(부모 글꼴, 부모 너비 등). 이 도구는 글꼴 계열 변환을 위해 %를 기준 글꼴 크기 기준으로 계산합니다. 즉 100%가 기준 글꼴 크기와 같습니다. 너비의 %처럼 다른 기준이 필요하면 그 맥락에 맞게 해석해야 합니다.
vw와 vh는 어떻게 계산되나요?
1vw는 뷰포트(브라우저 화면) 너비의 1%, 1vh는 높이의 1%입니다. 이 도구에서 뷰포트 너비·높이 값을 바꾸면 vw·vh·vmin·vmax 결과가 그에 맞춰 다시 계산됩니다. 기본값은 1920×1080입니다.
소수점이 길게 나오는데 반올림해도 되나요?
대부분 괜찮습니다. 이 도구도 보기 좋게 반올림한 값을 보여 줍니다. 다만 rem·em을 소수로 그대로 쓰면 브라우저가 정확히 계산해 주므로, px로 딱 떨어지지 않을 때는 반올림한 px보다 rem 소수를 쓰는 편이 더 정확할 수 있습니다.
기준 확인일: 2026-07-17. 단위 환산은 W3C CSS Values 및 MDN 문서의 96px = 1in 표준을 따릅니다.