PX을 REM으로 변환 | CSS 계산기 및 참조표

CSS 및 UI 디자인을 위해 PX를 REM으로, 또는 REM을 PX로 변환합니다. 기본 폰트 크기 변경, 실시간 참조표, Tailwind 간격 토큰을 확인해 보세요.

PX / REM 변환기

rem = px / root font-size

px
자주 쓰는 기본 크기
px
rem

참조표 (Cheat Sheet)

PXREM가장 가까운 Tailwind
4px0.25remp-1
8px0.5remp-2
10px0.625rem-
12px0.75remp-3
14px0.875rem-
16px1remp-4
18px1.125rem-
20px1.25remp-5
24px1.5remp-6
32px2remp-8
40px2.5remp-10
48px3remp-12
64px4remp-16
80px5remp-20
96px6remp-24

howToHeading

  1. "기본 크기(Base size)" 항목에 프로젝트의 html font-size를 설정하세요. 보통 16px이 기본값입니다.
  2. 디자인에 맞춰 PX 입력란에 24와 같은 값을 입력합니다.
  3. REM 입력란에 즉시 1.5rem이 나타납니다. 반대로 REM 입력란에 2rem을 입력하면 32px이 계산됩니다.
  4. 아래에 있는 참조표를 통해 일반적인 폰트 크기, 간격, Tailwind 참조 토큰을 한눈에 확인할 수 있습니다.

featuresHeading

  • 즉각적인 양방향 변환: PX 또는 REM 값을 입력하면 별도의 계산 버튼을 클릭할 필요 없이 즉시 상대값이 표시됩니다.
  • 기본 폰트 크기 변경: 16px로 시작하거나 프로젝트 고유의 10px, 14px 루트 폰트 사이즈로 손쉽게 설정할 수 있습니다.
  • 실시간 참조표 제공: 기본 크기에 따라 12px, 16px, 24px, 32px 등 디자인에 자주 쓰이는 크기의 변환 값이 자동으로 업데이트됩니다.
  • Tailwind 여백(Spacing) 참고: 입력한 픽셀 값에 해당하는 가장 가까운 Tailwind spacing 토큰을 확인할 수 있습니다.
  • 네트워크 불필요: 모든 변환 계산은 브라우저 메모리 내에서 실행되어 매우 빠르며 오프라인에서도 작동합니다.

relatedHeading

FIRE 계산기 2026 (물가상승률 반영) - 은퇴 자금 시뮬레이터

2026 최신 FIRE 재무 자유 계산기(물가상승률 반영). 브라우저 로컬에서 실제 구매력을 시뮬레이션하고, 은퇴 자금 부족액을 분석하여 연간 자산 계획을 세우세요. 엑셀이나 Notion 대시보드를 위한 CSV 원클릭 내보내기를 지원합니다.

포지션 규모 계산기 - 리스크 기반 트레이딩 규모 산정

계좌 잔고, 리스크 %, 진입가 및 손절가를 기반으로 트레이딩 포지션 규모를 계산하세요. 데이터 업로드 없이 브라우저 로컬에서 실행되므로 거래 전 리스크 시나리오를 비교할 수 있습니다.

복리 계산기 | 무료 적립식 투자 수익 및 APY 차트

초기 원금, 정기 투자액, 연간 수익률(APY) 및 투자 기간을 입력하여 복리 성장을 계산하세요. 브라우저 내에서 원금, 이자 및 최종 잔액을 인터랙티브 차트로 시각화합니다.

온라인 대출 / 모기지 계산기 - 즉각적인 상환 일정표

대출 계산기 / 모기지 계산기를 사용하여 브라우저 로컬에서 월 상환액, 총 이자 및 상환 일정표를 추정해 보세요. 대출 금액, 이자율 및 기간을 입력하면 차트와 함께 결과를 즉시 확인할 수 있습니다.

온라인 투자 및 ROI 계산기 - 복리 수익 시각화

이 투자 계산기 / ROI 계산기를 사용하여 초기 원금, 매월 정기 투자액, 연간 수익률 및 물가상승률을 반영한 결과를 브라우저 로컬에서 추정하세요. 실시간 복리 차트, ROI 및 연간 세부 일정을 통해 예상 수익을 확인할 수 있습니다.

APR APY 변환기 - 명목 금리와 실효 금리 변환

APR to APY Calculator를 사용하여 브라우저에서 로컬로 APR과 APY를 양방향 변환하세요. 금리를 입력하고 복리 주기를 선택하면 실효 연이율, 차이, 주기별 비교표를 즉시 확인할 수 있습니다.

이익률 계산기 - 마진 대 마크업 변환기

이 이익률 계산기를 사용하여 브라우저 로컬에서 매출 총이익, 마크업, 마진 및 판매 가격을 계산하세요. 원가와 판매가, 또는 원가와 목표 마진을 입력하면 지표가 즉시 계산됩니다.

CPM 및 CPC 계산기 - 광고 비용 및 CTR 온라인 측정

이 CPM 및 CPC 계산기를 사용하여 광고 비용, 노출수, 클릭수, CPM, CPC 및 CTR을 브라우저에서 로컬로 추정하세요. 예산과 목표 단가를 입력하여 캠페인 시나리오를 즉시 계획할 수 있습니다.

logicHeading

  • PX에서 REM 변환 공식: REM = PX / Base Size.
  • REM에서 PX 변환 공식: PX = REM × Base Size.
  • 브라우저 기본 루트 크기(16px) 설정 시, 16px = 1rem, 24px = 1.5rem이 됩니다.

faqHeading

1rem은 몇 픽셀(px)인가요?

대부분의 브라우저에서는 1rem이 기본적으로 16px과 같습니다. 프로젝트 설정에서 html { font-size }를 수정한 경우, 해당 루트 폰트 크기를 도구의 기본 크기로 지정하세요.

PX와 REM의 차이점은 무엇인가요?

PX는 고정된 절대 픽셀 단위입니다. REM은 최상위(Root) 요소의 폰트 크기에 상대적이므로, 사용자가 브라우저 설정에서 변경한 폰트 크기를 유연하게 반영하여 접근성 높은 레이아웃을 만들 수 있습니다.

왜 10px을 기본 크기로 사용하는 프로젝트가 있나요?

일부 팀은 CSS에 html { font-size: 62.5%; }를 선언하여 1rem을 10px로 맞춥니다. 이렇게 하면 1.4rem이 14px이 되므로 머릿속으로 계산하기 쉽지만, 이 방식을 적용하기 전에 웹 접근성에 미칠 영향을 먼저 고려해야 합니다.

EM 변환도 지원하나요?

아닙니다. 이 도구는 기준이 고정된 PX와 REM 변환에 집중합니다. EM 단위는 상위 요소가 아닌 현재 요소의 폰트 크기에 의존하므로 REM과 동일한 방식으로 계산할 수 없습니다.

CSS나 디자인 데이터가 서버에 저장되나요?

아닙니다. 변환은 어떠한 파일 업로드나 서버 호출 없이 사용자의 기기에서 로컬로 진행됩니다.