PX에서 REM 변환기

PX에서 REM 변환기는 프로젝트에서 실제로 사용하는 루트 글꼴 크기를 기준으로 픽셀 값을 rem 또는 em 단위로, 그리고 그 반대로 변환합니다. 하나의 값이나 전체 글꼴 크기 스케일을 붙여 넣으면 변환된 숫자, 원래 픽셀을 주석으로 보존한 복사 가능한 CSS 블록, 각 크기를 실제 배율로 표시하는 눈금자, 방문자가 브라우저 글꼴 크기를 높일 때 rem 값이 어떻게 반응하는지 보여 주는 미리 보기를 확인할 수 있습니다.

PX에서 REM 공식

픽셀과 rem 사이의 변환은 한 번의 나눗셈으로 끝납니다. 문서의 루트 글꼴 크기만 알면 됩니다.

브라우저 기본 루트가 16px이면 24px ÷ 16 = 1.5rem 및 1.5rem × 16 = 24px가 됩니다. 스타일시트에서 html { font-size: 62.5%; }를 설정하면 루트가 10px이 되고 같은 24px는 2.4rem이 됩니다.

PX에서 REM 변환표 (16px 루트)

rem과 em: 중첩이 모든 것을 바꾸는 이유

rem은 루트 요소(html)를 기준으로 측정되므로 문서 어디에서나 같은 의미를 가집니다. em은 부모 요소의 계산된 글꼴 크기를 기준으로 측정되므로, 중첩할수록 동일한 em 값이 누적됩니다. 이 그림은 16px 루트에서 시작해 3개 레벨에 걸쳐 동일한 1.5 배수를 적용한 모습을 보여 줍니다:

대부분의 팀이 따르는 실용적인 규칙은 다음과 같습니다. 글꼴 크기, 레이아웃 간격 및 중단점에는 rem을 사용하고, 버튼 내부 패딩이나 텍스트 옆 아이콘 크기처럼 자체 컴포넌트와 함께 확대되어야 하는 항목에는 em을 의도적으로 사용하세요.

px 대신 rem을 사용하는 이유

• 접근성. 방문자가 브라우저의 기본 글꼴 크기를 20px로 설정하면 모든 rem 기반 크기가 비례하여 커집니다. px로 하드코딩한 크기는 해당 설정을 완전히 무시합니다.
• 전체 크기를 조정하는 하나의 조절 장치. 미디어 쿼리에서 루트 글꼴 크기를 변경하면 전체 글꼴 크기 스케일과 간격 리듬이 함께 바뀌므로 컴포넌트별 재정의가 필요 없습니다.
• 일관된 간격 리듬. 패딩과 여백을 rem으로 표현하면 수직 리듬이 글꼴 크기 스케일에 맞춰져 서로 어긋나지 않습니다.
• 디자인 토큰 친화적. 최신 디자인 시스템(및 Tailwind의 기본 스케일)은 크기를 rem으로 제공하므로 기존 px 값을 변환하면 전달이 쉬워집니다.

62.5% 루트 글꼴 크기 트릭

많은 팀이 1rem을 깔끔한 10px로 만들고 암산 변환을 간단하게 하려고 다음 규칙을 추가합니다:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* 읽기 쉬운 16px로 복원 */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

62.5%는 고정된 픽셀 값이 아니라 브라우저 기본값의 백분율이므로 방문자의 글꼴 크기 설정도 계속 반영합니다. 기억할 점은 body를 대략 1.6rem으로 재설정해야 한다는 것입니다. 그렇지 않으면 기본 텍스트가 10px로 표시됩니다. 위의 루트 글꼴 크기 필드를 10으로 설정하면 이 설정을 기준으로 변환할 수 있습니다.

미디어 쿼리에서 rem

미디어 쿼리 안에서 rem은 CSS에서 설정한 html 글꼴 크기가 아니라 브라우저의 초기 루트 글꼴 크기를 기준으로 해석됩니다. 따라서 스타일시트에서 html { font-size: 10px }를 선언해도 @media (min-width: 48rem)은 항상 768px입니다. 이렇게 하면 rem 중단점이 안전하고 예측 가능해지며, em과 rem이 동일하게 동작하는 몇 안 되는 경우 중 하나입니다.

여전히 px를 사용해야 하는 경우

• 아주 얇은 테두리와 구분선 — 1px 테두리는 1px로 유지되어야 합니다. 크기를 조정하면 흐릿한 서브픽셀 선이 생깁니다.
• 고정 크기 에셋 — 스프라이트 오프셋, 정확한 그림자 오프셋, 알려진 고유 크기의 이미지.
• 캔버스 및 인쇄 출력 — 물리적 측정값 또는 장치 픽셀 측정값이 실제 의도인 경우.

이 변환기 사용 방법

1. 변환 방향 선택: px → rem, rem → px, px → em 또는 em → px.
2. 값 입력: 하나의 숫자 또는 쉼표나 공백으로 구분한 전체 스케일(한 번에 최대 20개)을 입력합니다. 24px와 같은 끝 단위는 허용되며 무시됩니다.
3. 루트 글꼴 크기 설정: 브라우저 기본값에는 16을 유지하거나, 10(62.5% 트릭), 12, 14, 18 또는 20의 프리셋 칩을 누릅니다.
4. 변환 클릭: 결과 표, 실제 크기 눈금자, 접근성 미리 보기 및 CSS 블록을 확인합니다.
5. CSS 복사: 하나의 버튼으로 모든 font-size 선언을 복사하며, 원본 픽셀 값은 주석으로 유지됩니다.

자주 묻는 질문

px를 rem으로 어떻게 변환하나요?

픽셀 값을 루트 글꼴 크기로 나눕니다. 브라우저 기본 루트인 16px에서는 24px ÷ 16 = 1.5rem입니다. 반대로 하려면 rem 값에 루트 글꼴 크기를 곱합니다. 1.5rem × 16 = 24px입니다.

1rem은 몇 px인가요?

1rem은 페이지의 루트 글꼴 크기와 같습니다. 모든 주요 브라우저의 기본값은 16px이므로, html 요소나 방문자의 브라우저 설정이 변경하지 않는 한 1rem은 16px입니다.

rem과 em의 차이점은 무엇인가요?

rem은 항상 html 요소의 루트 글꼴 크기를 기준으로 하므로 문서 어디에서나 1.5rem의 크기가 같습니다. em은 요소 자체 부모의 글꼴 크기를 기준으로 하므로 중첩된 요소에서는 누적됩니다. 다른 1.5em 안의 1.5em은 기본 크기의 2.25배로 렌더링됩니다.

62.5% 루트 글꼴 크기 트릭이란 무엇인가요?

html { font-size: 62.5%; }로 설정하면 루트가 16px 대신 10px이 되므로 1rem은 10px이고 암산이 간단해집니다. 24px는 2.4rem입니다. 62.5%는 절대 픽셀 값이 아니라 상대값이므로 방문자의 브라우저 글꼴 크기 설정에 따라 계속 조정됩니다.

글꼴 크기에는 px와 rem 중 무엇을 사용해야 하나요?

방문자가 기본 브라우저 글꼴 크기를 키울 때 레이아웃도 커지도록 글꼴 크기, 간격 및 미디어 쿼리에는 rem을 사용하세요. 헤어라인 테두리, 1픽셀 구분선 및 일부 그림자 오프셋처럼 크기가 조정되지 않아야 하는 값에는 px를 사용하세요.

rem 값은 정수여야 하나요?

아니요. 브라우저는 소수 rem 값을 문제없이 처리하고 내부적으로 서브픽셀 크기를 계산합니다. 깔끔한 숫자를 원한다면 10px이나 8px처럼 스케일을 균등하게 나누는 루트 글꼴 크기를 선택하거나 이 변환기의 소수점 정밀도 옵션을 사용하세요.

rem은 padding, margin 및 미디어 쿼리에 사용할 수 있나요?

예. rem은 padding, margin, width, gap 및 border-radius를 비롯하여 CSS에서 길이를 허용하는 모든 곳에서 유효합니다. 미디어 쿼리에서 rem은 사용자 지정 html 글꼴 크기가 아니라 초기 16px 루트를 기준으로 해석되므로 48rem 중단점은 항상 768px입니다.

추가 자료

• CSS 길이 단위 - MDN
• 글꼴 상대 길이 - W3C CSS Values