px ↔ rem 변환기

언제 사용하나요?

CSS 작업 중 디자인 시안의 px 값을 rem으로 변환하거나, rem 값이 실제로 몇 px인지 확인해야 할 때 사용합니다. 접근성을 위해 px 대신 rem을 사용하는 프로젝트에서 특히 유용합니다.

사용 방법

• 기준 폰트 크기를 입력합니다 (기본값: 16px).
• px 값을 입력하면 rem으로, rem 값을 입력하면 px로 자동 변환됩니다.
• 변환 결과를 복사해 CSS에 사용합니다.

입력값 안내

기준 폰트 크기는 보통 html 요소의 font-size 값입니다. 기본값은 16px이며, 프로젝트 설정에 맞게 변경할 수 있습니다.

계산·변환 기준

rem = px ÷ 기준 폰트 크기. 예: 24px ÷ 16 = 1.5rem. 반대로 px = rem × 기준 폰트 크기.

사용 예시

• CSS 크기 변환 - 24px을 16px 기준 1.5rem으로 변환합니다.
• 디자인 토큰 정리 - 디자인 시안의 px 값을 rem 기반 스타일로 바꿉니다.
• 접근성 대응 - px 고정값을 rem으로 바꿔 사용자 글꼴 크기 설정에 반응하도록 만듭니다.

예시

• 기준 16px 기준: 24px → 1.5rem
• 기준 16px 기준: 1rem → 16px, 0.875rem → 14px
• 기준 16px: 12px → 0.75rem, 18px → 1.125rem, 36px → 2.25rem
• 기준 18px (body 폰트 18px 설정 시): 36px → 2rem
• Tailwind CSS text-sm → 14px, text-lg → 18px, text-2xl → 24px px/rem 확인
• 디자인 시안 32px 제목 → 기준 16px 대비 2rem으로 CSS에 반영

주의사항

• 이 계산기는 단순 수식(rem = px ÷ 기준 폰트 크기) 기반입니다. 실제 브라우저 렌더링은 부모 요소의 font-size 상속에 따라 다를 수 있으니 최종 값은 브라우저에서 확인하세요.
• 기준 폰트 크기를 프로젝트와 다르게 설정하면 잘못된 값이 나옵니다. 프로젝트의 html { font-size } 값을 기준으로 입력하세요.

계산·사용 가이드

px와 rem 변환 공식

rem은 HTML 루트 요소의 font-size 기준입니다. 기본값이 16px이면 1rem=16px, 2rem=32px입니다. 기준 폰트 크기를 바꾸면 변환 결과도 달라집니다.

반응형 디자인 활용

px는 화면 크기에 관계없이 절대 크기이고, rem은 사용자 브라우저 폰트 설정에 맞게 스케일됩니다. 접근성을 고려할 때 rem 단위 사용을 권장합니다.

자주 묻는 질문

기준 폰트 크기를 바꿀 수 있나요?

네, 기본 16px 외에 프로젝트 기준값을 직접 입력할 수 있습니다.

소수점 rem도 계산되나요?

네, 최대 6자리까지 정리해 표시합니다.

rem을 쓰면 무엇이 좋나요?

사용자가 브라우저 기본 글꼴 크기를 키우면 rem 기반 요소가 함께 커져 접근성이 좋아집니다.

기준 16px은 어디서 오나요?

대부분의 브라우저 기본 글꼴 크기가 16px이라 1rem이 16px이 됩니다.

관련 도구

• CSS 단위 변환기 - px, rem, em, %, vw, vh를 변환합니다.
• CSS vw 단위 변환기 - px 값을 viewport 너비 기준 vw 단위로 변환하거나 그 반대로 변환합니다.
• CSS clamp 생성기 - 최솟값·최댓값과 뷰포트 범위를 입력해 CSS clamp() 함수를 자동으로 생성합니다.
• CSS 포매터 - minify되거나 뒤섞인 CSS 코드를 선택자·속성별로 줄 분리해 정렬합니다. @media 쿼리와 :root 변수 블록도 계층에 맞게 들여쓰기합니다.
• Flexbox 생성기 - flex-direction, justify-content, align-items, gap 값을 조정해 Flexbox CSS를 생성합니다.
• URL 인코딩/디코딩 - 텍스트를 URL 안전 형식(%XX)으로 인코딩하거나 인코딩된 URL을 원래 텍스트로 디코딩합니다.