CSS 단위 변환기 — px, rem, em, pt, %
임의의 루트 글꼴 크기에 대해 px, rem, em, pt, %를 상호 변환합니다. 값을 입력하면 모든 단위가 실시간 갱신되고 결과를 단위와 함께 복사할 수 있습니다.
🔒 모두 브라우저 안에서 동작합니다. 입력과 출력은 서버로 전송되거나 저장되지 않아 안전합니다.
em은 rem과 동일하게(루트 크기 기준) 처리됩니다. 값을 클릭하면 단위와 함께 복사됩니다.
이 도구 소개
매일같이 쓰는 CSS 단위 — px·rem·em·pt·퍼센트 — 를 직접 정한 루트 글꼴 크기를 기준으로 서로 변환합니다. 기준 크기를 설정하고 아무 단위로나 값을 입력하면 그에 해당하는 모든 값이 즉시 표시되어, 반응형이고 접근성 좋은 레이아웃을 만들 때 어림짐작을 없애 줍니다. 디자인을 픽셀에서 rem으로 옮기든 글자 크기를 유동적으로 정하든, 계산은 브라우저에서 대신 처리되며 어디로도 전송되지 않습니다.
자주 묻는 질문
px, em, rem의 차이는 무엇인가요?
픽셀(px)은 고정된 절대 단위입니다. em은 현재 요소의 글꼴 크기를 기준으로 하므로 요소가 서로 중첩되면 값이 누적됩니다. rem은 페이지의 루트 글꼴 크기를 기준으로 하여 어디에 쓰든 예측하기 쉽습니다. 포인트(pt)는 인쇄에서 온 단위로, 일반적인 96 DPI에서 약 1.333 px에 해당합니다.
왜 픽셀을 rem으로 변환하나요?
rem으로 크기를 지정하면 레이아웃이 독자가 선택한 글꼴 크기에 맞춰 확대·축소되므로 접근성과 반응형 디자인에 유리합니다. 누군가 브라우저의 기본 글자 크기를 키우면 rem 기반의 여백과 글자도 함께 커지지만, 고정 픽셀은 그대로 있습니다. 픽셀 값을 보통 16 px인 알려진 루트 크기를 기준으로 rem으로 변환해 두면 전체를 다시 디자인하지 않고도 그런 유연성을 얻습니다.
변환이 서버에서 이루어지나요?
아니요. 모든 계산은 입력하는 동안 브라우저에서 실행되므로 입력한 값이 어디에도 업로드·기록·저장되지 않습니다. 이 도구는 지정한 루트 글꼴 크기를 사용해 단위 사이를 즉시 변환할 뿐이며, 페이지를 불러온 뒤에는 오프라인에서도 작동합니다 — 디자인에 관한 어떤 정보도 기기를 벗어나지 않습니다.