PX → REM 변환기

기능

이 도구는 CSS 길이를 픽셀과 상대 단위인 rem, em 사이에서 변환합니다. 24px 같은 값 하나를 입력하면 1.5rem이 나오고, 한 줄에 하나씩 여러 값을 넣으면 한 번에 변환되며, 스타일시트 전체를 붙여 넣으면 그 안의 모든 px 값이 그 자리에서 바뀝니다. 변환표는 현재 기준 글꼴 크기에서 1px부터 128px까지 자주 쓰는 크기를 보여 줍니다. 데이터는 브라우저 밖으로 나가지 않습니다.

사용 방법

1. CSS를 붙여 넣거나 한 줄에 하나씩 값을 입력합니다. 단위 없는 숫자는 px(반대 방향일 때는 rem/em)로 읽고, 다른 단위로 쓴 값은 반대로 변환합니다.
2. 기준 글꼴 크기를 정합니다. 모든 브라우저의 기본값은 16px이며, html { font-size: 62.5% }로 1rem = 10px을 만드는 프로젝트도 있습니다.
3. 방향(px → rem 또는 rem → px), 단위(rem 또는 em), 남길 소수 자릿수를 고릅니다.
4. 필요하면 이 값 미만은 px 유지를 설정해 1px 테두리 같은 가는 선을 px로 둡니다.
5. 결과 위의 버튼으로 복사합니다.

예시

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

퍼센트, 색상, url() 안의 파일 이름, .mt-16px 같은 클래스 이름처럼 px가 아닌 값은 그대로 둡니다. 0px는 0이 됩니다.

px, rem, em

• px는 절대 단위로, 독자가 설정한 글꼴 크기를 무시합니다.
• rem(root em)은 html 요소 글꼴 크기의 배수입니다. 독자가 브라우저를 20px로 설정하면 1rem은 20px가 되고 레이아웃 전체가 함께 커집니다.
• em은 현재 요소 글꼴 크기의 배수입니다. 해당 글자를 따라가야 하는 간격에 편리하지만 중첩된 em은 곱해지므로 기본값으로는 rem이 더 안전합니다.

미디어 쿼리도 변환됩니다. @media (min-width: 768px)는 48rem(또는 48em)이 되어 독자가 글자를 확대해도 중단점이 일관되게 유지됩니다. 미디어 쿼리 안의 rem과 em은 모두 html 규칙이 아니라 브라우저 기본 글꼴 크기를 기준으로 한다는 점에 유의하세요.