CSS px/rem 변환
로컬 처리root font size 사용자 입력
사용 방법과 처리 기준
위 입력란에 값을 넣으면 결과가 자동으로 계산됩니다. 각 입력란의 설명과 단위를 확인하세요.
예시: 값 = 32, 방향 = pxToRem, 기준 글자 크기 (px) = 16 → 2
도구의 계산과 파일 처리는 브라우저 안에서 이루어집니다. 계산기·단위 변환의 공유 링크를 직접 만들면 값이 URL에 포함됩니다. 계정·방문 통계·광고 관련 정보 처리는 개인정보처리방침을 확인하세요.
rem은 루트(html) 글자 크기의 배수입니다. 기본 16px에서 24px = 1.5rem입니다. 기준 크기를 바꿔 계산할 수 있습니다.
CSS px/rem 변환 사용 방법
- 1값 입력바꿀 px 또는 rem 값을 넣습니다.
- 2방향·기준 크기px → rem 또는 rem → px를 고르고 html 글자 크기(기본 16)를 정합니다.
- 3결과 복사CSS에 바로 붙여 넣습니다.
활용 예시
24px를 rem으로
입력: 24px, 기준 16px
결과: 1.5
1.5rem을 px로
입력: 1.5rem, 기준 16px
결과: 24
이럴 때 유용해요
- 디자인 시안의 px 값을 rem 기반 CSS로 옮길 때
- 사용자가 글자 크기를 키워도 레이아웃이 따라오게 할 때
- 디자인 시스템의 간격 단위를 정리할 때
자주 묻는 질문 (FAQ)
em과 rem은 무엇이 다른가요?
rem은 항상 html 글자 크기를, em은 부모 요소의 글자 크기를 기준으로 합니다.
html 글자 크기를 62.5%로 두었어요.
기준 크기에 10을 넣으면 됩니다(16 × 62.5% = 10px).