CSS 단위 변환(px·rem·em), 한 번에 정확하게
웹 화면의 글자 크기와 여백을 다룰 때 가장 많이 쓰는 단위가 px, rem, em입니다. px(픽셀)은 고정 크기의 절대 단위이고, rem과 em은 폰트 크기를 기준으로 하는 상대 단위입니다. 이 CSS 단위 변환기는 값과 입력 단위, 그리고 기준 폰트 크기를 입력하면 px↔rem↔em을 즉시 상호 환산해 줍니다. px rem 변환이나 rem em 변환을 손으로 계산하느라 시간을 들일 필요 없이, 반응형 디자인 작업 중 빠르게 값을 확인할 수 있습니다.
px·rem·em 변환 공식
세 단위의 변환은 모두 기준 폰트 크기를 가운데 두고 이루어집니다. rem은 rem = px ÷ 기준 폰트 크기로 구하고, em도 같은 식이지만 기준이 부모 요소의 폰트 크기라는 점이 다릅니다. 반대로 px으로 되돌릴 때는 px = rem × 기준 폰트 크기를 씁니다. 대부분의 브라우저는 루트(html) 폰트 크기가 기본 16px이므로, 별도 설정이 없다면 16을 기준값으로 두면 됩니다. 예를 들어 16px은 1rem, 24px은 1.5rem, 32px은 2rem이 됩니다. 만약 디자인 시스템에서 루트 폰트 크기를 10px로 잡았다면, 같은 24px이라도 2.4rem이 되므로 반드시 실제 기준값을 입력해 계산해야 정확합니다.
rem과 em, 무엇이 다른가
rem과 em은 계산식이 같아도 기준이 다릅니다. rem(root em)은 항상 문서 최상위인 html 요소의 폰트 크기를 기준으로 하므로, 어느 위치에 쓰든 동일한 px로 환산됩니다. 그래서 일관성이 중요한 본문 글자 크기나 레이아웃 여백에는 rem이 권장됩니다. 반면 em은 해당 요소가 상속받은 부모 요소의 폰트 크기를 기준으로 합니다. 컴포넌트 내부에서 부모 글자 크기에 비례해 커지거나 줄어들길 원할 때 유용하지만, 중첩이 깊어지면 값이 누적되어 의도와 달라질 수 있으니 주의해야 합니다. 이 도구는 입력 단위를 rem 또는 em으로 두면 동일한 기준값으로 px과 다른 상대 단위를 함께 보여 주므로, 두 단위의 감각을 비교하며 익히기에 좋습니다.
이 도구 활용법
- 디자인 시안에서 받은 px 값을 입력해 rem으로 바꿔 CSS에 바로 적어 넣으세요.
- 기존 코드의 rem 값을 px으로 되돌려 실제 화면 크기를 가늠할 수 있습니다.
- 접근성을 고려해 사용자가 브라우저 기본 글자 크기를 키워도 비례해 커지는 rem 기반 레이아웃을 설계할 때 활용하세요.
- 환산표에서 12·14·16·24·32px 등 자주 쓰는 값의 rem·em 변환을 한눈에 확인할 수 있습니다.
변환 결과는 입력한 기준 폰트 크기에 따른 수치이며, 실제 화면에서는 부모 요소의 폰트 크기 상속, 브라우저 최소 글자 크기 설정 등에 따라 보이는 크기가 달라질 수 있으니 참고용으로 활용하세요.
자주 묻는 질문 (FAQ)
Q. 16px는 몇 rem인가요?
A. 브라우저 기본 기준 16px에서 16px ÷ 16 = 1rem입니다. 24px은 1.5rem, 32px은 2rem이 됩니다. 기준값이 다르면 결과도 달라집니다.
Q. px을 rem으로 어떻게 변환하나요?
A. rem = px ÷ 기준 폰트 크기입니다. 기준이 16px이면 20px ÷ 16 = 1.25rem입니다. 이 도구가 자동으로 계산해 줍니다.
Q. rem과 em의 차이는 무엇인가요?
A. rem은 루트(html) 폰트 크기를, em은 부모 요소의 폰트 크기를 기준으로 합니다. em은 중첩 시 값이 누적될 수 있습니다.
Q. rem을 px으로 다시 바꾸려면 어떻게 하나요?
A. px = rem × 기준 폰트 크기입니다. 기준 16px에서 1.5rem × 16 = 24px이 됩니다.