rem·em·vw·퍼센트·ms, 자주 쓰는 CSS 상대 단위 다섯 가지를 px(또는 초)로 즉시 변환합니다. 루트 폰트 크기·부모 폰트 크기·뷰포트 너비 같은 기준값을 직접 설정하고 결과를 바로 복사하세요. 모든 계산은 브라우저 안에서만 이루어집니다.
CSS에는 화면 크기·부모 요소·루트 요소에 따라 실제 크기가 달라지는 상대 단위가 여러 개 있습니다. rem과 em은 폰트 크기를, vw는 뷰포트 너비를, 퍼센트는 부모 요소의 너비를, ms는 애니메이션·트랜지션의 지속 시간을 기준으로 합니다. 다섯 단위 모두 '기준값 × 배율 = 절대값(px 또는 초)'이라는 같은 형태의 계산이지만, 기준값이 무엇인지는 매번 다릅니다.
실무에서는 디자인 시안이 px로 오고 구현은 상대 단위로 하는 경우가 많아, 이 다섯 단위와 px 사이를 하루에도 여러 번 오가게 됩니다. 단위마다 다른 페이지를 열어 계산하는 대신, 탭을 눌러 같은 화면에서 바로 전환할 수 있게 모았습니다.
rem(root em)은 HTML 루트 요소의 폰트 크기를 기준으로 합니다. 계산식은 px = rem × 루트 폰트 크기입니다. 기본값 16px 기준으로 1rem = 16px이지만, html { font-size: 62.5% }처럼 루트를 바꾼 프로젝트에서는 값이 달라지므로 루트 폰트 크기 입력을 실제 프로젝트 값과 맞춰야 합니다.
사용자가 브라우저 기본 글자 크기를 키우면 rem으로 잡은 값도 함께 커져 접근성에 유리합니다. 폰트 크기·여백처럼 화면 전체와 함께 스케일되어야 하는 값에 주로 씁니다.
em의 계산식은 rem과 같은 px = em × 부모 폰트 크기지만, 기준이 루트가 아니라 해당 요소가 상속받은 부모의 폰트 크기입니다. em으로 폰트 크기를 지정한 요소 안에 또 em을 쓰면 배율이 곱해져 누적되므로, 여러 단계 중첩된 값을 확인할 때는 실제 부모 크기를 정확히 입력해야 합니다.
버튼 padding처럼 '이 요소가 자기 폰트 크기에 비례해 커지길' 원할 때는 em이, 화면 전체 기준의 예측 가능한 값이 필요할 때는 rem이 더 적합합니다.
vw(viewport width)는 계산식이 px = vw × 뷰포트 너비 ÷ 100으로, 브라우저 창(뷰포트) 전체 너비의 1%를 1vw로 봅니다. 반응형 히어로 타이틀이나 화면 너비에 정비례해 커지는 요소에 자주 쓰입니다.
뷰포트 너비 입력값을 실제 확인하려는 화면 크기(모바일 390px, 데스크톱 1440px 등)로 바꾸면 그 브레이크포인트에서 몇 px이 되는지 바로 알 수 있습니다.
퍼센트는 px = % × 부모 너비 ÷ 100으로 계산되며, 여기서 부모 너비는 CSS 선언값이 아니라 브라우저가 실제로 계산한(computed) 값입니다. 부모가 유동적인 레이아웃(flex·grid)에 속해 있다면 이 값 자체가 화면 크기에 따라 달라진다는 점을 기억하세요.
고정폭 컨테이너 안에서 요소 너비를 퍼센트로 설계할 때, 특정 화면 크기에서 실제 몇 px이 되는지 미리 확인하는 용도로 씁니다.
ms와 s는 단순 비례식(1s = 1000ms)이라 기준값 입력이 필요 없습니다. CSS의 transition-duration, animation-duration은 두 단위 모두 허용하므로, 디자인 스펙에 적힌 밀리초 값을 코드에 초 단위로 옮기거나 그 반대로 확인할 때 씁니다.
단위 변환일 뿐이며, 실제 체감 속도는 easing 함수와 애니메이션 대상에 따라 달라진다는 점은 별도로 고려해야 합니다.
디자인 도구는 보통 px 값을 주지만 접근성을 지키려면 폰트·여백은 rem으로 구현하는 편이 좋습니다. 시안 하나에 수십 개 값이 있을 때는 계산기로 한 번에 확인하는 편이 빠릅니다.
부모 요소의 font-size가 이미 확대·축소된 상태라면 em 값만 보고는 실제 크기를 가늠하기 어렵습니다. 부모의 계산된 폰트 크기를 입력해야 정확한 px 값이 나옵니다.
뷰포트 너비를 390px(모바일)로 바꾸면 같은 5vw가 19.5px이 됩니다. vw로 폰트 크기를 스케일할 때 최소·최대 크기를 벗어나지 않는지 여러 화면 너비에서 확인하는 용도로 씁니다.
그리드 컬럼이나 사이드바 너비를 퍼센트로 설계했을 때, 특정 브레이크포인트에서 실제 몇 px이 되는지 미리 확인해 다른 고정폭 요소와 나란히 배치할 수 있는지 가늠할 수 있습니다.
디자인 스펙 문서는 밀리초로, 코드베이스는 초 단위 관례를 쓰는 경우가 섞여 있습니다. transition-duration에 어느 쪽을 적어도 동작은 같으므로 팀 컨벤션에 맞는 쪽으로 바꿔 적으면 됩니다.
이 도구가 무엇인지, 누구에게·어떻게·왜 필요한지 한눈에 정리했습니다.
CSS 단위 변환기는 rem·em·vw·퍼센트·ms 다섯 가지 CSS 상대 단위를 픽셀(px) 또는 초(s)로, 혹은 그 반대로 즉시 변환해주는 도구입니다.
반응형 레이아웃과 애니메이션을 다루며 상대 단위와 절대 단위를 자주 오가는 프론트엔드 개발자와 UI 디자이너를 위한 도구입니다.
상단 탭에서 변환할 단위를 고르고 값과 기준값(루트 폰트 크기, 부모 폰트 크기, 뷰포트 너비 등)을 입력하면 브라우저 안에서 즉시 결과를 보여줍니다. Swap으로 방향을 바꿀 수 있습니다.
단위마다 따로 계산기를 찾아다니지 않고 한 페이지에서 다섯 가지 CSS 단위를 전부 변환할 수 있어 반응형 작업의 반복 계산을 줄여줍니다.