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 포매터 - minify되거나 뒤섞인 CSS 코드를 선택자·속성별로 줄 분리해 정렬합니다. @media 쿼리와 :root 변수 블록도 계층에 맞게 들여쓰기합니다.
• 파일 크기 변환기 - Byte, KB, MB, GB, TB 파일 크기 단위를 1000 또는 1024 기준으로 변환합니다.
• YAML ↔ JSON 변환기 - YAML과 JSON 데이터를 브라우저에서 양방향으로 변환합니다.
• Markdown → HTML 변환기 - Markdown 문서를 HTML로 변환하고 렌더링 미리보기를 제공합니다.
• CSV ↔ JSON 변환기 - CSV와 JSON 배열 데이터를 양방향으로 변환합니다.
• Query String ↔ JSON 변환기 - URL 쿼리스트링과 JSON 객체를 양방향으로 변환합니다.