본문으로 건너뛰기
🛠️
Whiz Tools

PX에서 REM으로 EM 변환기 – 무료 CSS 단위 계산기

픽셀(px), REM, EM 단위를 서로 변환하는 무료 CSS 도구다. 사용자가 지정한 루트 글꼴 크기와 부모 요소 글꼴 크기를 기준으로 값을 계산해주며, 반응형 웹 디자인과 접근성을 고려한 프론트엔드 개발에서 정확한 단위 환산이 필요할 때 활용된다.

PX, REM, EM 단위 변환기

픽셀(PX), 루트 엠(REM), 엠(EM) 단위 간 변환. 어느 필드에 값을 입력하면 다른 단위의 해당 값을 볼 수 있습니다.

px
px
px
rem
em
음수 또는 0 값에 대해서는 시각화를 사용할 수 없습니다

변환 공식

  • PX에서 REM으로: px 값 ÷ 루트 폰트 크기
  • PX에서 EM으로: px 값 ÷ 상위 요소 폰트 크기
  • REM에서 PX로: rem 값 × 루트 폰트 크기
  • EM에서 PX로: em 값 × 상위 요소 폰트 크기
로딩 계산기...
📚

문서화

PX, REM 및 EM 단위 변환기

px를 rem 및 em으로 변환하는 도구는 사용자가 설정한 루트 글꼴 크기와 부모 글꼴 크기를 사용하여 CSS 길이를 픽셀(px), 루트 em(rem), em 사이에서 변환합니다. 이 세 단위는 웹 페이지의 스타일을 지정하는 언어인 CSS에서 텍스트와 간격의 크기를 지정할 때 가장 흔히 사용됩니다.

px, rem, em이란?

**픽셀(px)**은 고정 단위입니다. 너비가 200px로 설정된 상자는 페이지에서 사용하는 글꼴 크기와 관계없이 너비가 200px로 유지됩니다.

rem("루트 em")은 페이지의 루트 요소, 일반적으로 <html> 태그의 글꼴 크기에 따라 조정되는 단위입니다. 대부분의 브라우저는 사이트에서 변경하지 않는 한 루트 글꼴 크기를 16px로 설정합니다. 루트 글꼴 크기가 16px이면 1rem은 16px와 같습니다.

em은 부모 요소, 즉 해당 요소를 포함하는 요소의 글꼴 크기에 따라 조정되는 단위입니다. 부모 요소에 font-size: 20px가 설정되어 있다면, 해당 부모 안의 1em은 20px와 같습니다.

rem과 em의 주요 차이는 각각 어떤 값을 기준으로 삼는지에 있습니다. rem은 항상 루트 요소를 기준으로 합니다. em은 가장 가까운 부모 요소를 기준으로 하므로 중첩 단계마다 값이 달라질 수 있습니다.

px를 rem으로 계산하는 방법

픽셀을 rem으로 변환하려면 픽셀 값을 루트 글꼴 크기로 나눕니다.

r=pRr = \frac{p}{R}

여기서 r은 rem 단위의 길이, p는 픽셀 단위의 길이, R은 픽셀 단위의 루트 글꼴 크기입니다.

풀이 예시

기본 루트 글꼴 크기인 16px에서 24px를 변환하면 다음과 같습니다.

24 ÷ 16 = 1.5rem

사이트에서 루트 글꼴 크기를 10px로 설정하면(html { font-size: 62.5%; }로 설정하는 일반적인 방법이며, 62.5%의 16px가 10px이기 때문입니다), 같은 24px는 다음과 같이 변환됩니다.

24 ÷ 10 = 2.4rem

rem을 px로 계산하는 방법

반대로 변환하려면 rem 값을 루트 글꼴 크기로 곱합니다.

p=r×Rp = r \times R

여기서 p는 픽셀 단위의 길이, r은 rem 단위의 길이, R은 루트 글꼴 크기입니다.

루트 글꼴 크기가 16px일 때 1.5rem은 1.5 × 16 = 24px로 다시 변환됩니다.

px를 em으로 계산하는 방법

픽셀을 em으로 변환하려면 픽셀 값을 부모 요소의 글꼴 크기로 나눕니다.

e=pPe = \frac{p}{P}

여기서 e는 em 단위의 길이, P는 픽셀 단위의 부모 요소 글꼴 크기입니다.

풀이 예시

부모 요소의 글꼴 크기가 20px이면 24px는 다음과 같이 변환됩니다.

24 ÷ 20 = 1.2em

em을 px로 계산하는 방법

em 값을 부모 글꼴 크기로 곱합니다.

p=e×Pp = e \times P

여기서 p는 픽셀 단위의 길이, e는 em 단위의 길이, P는 부모 글꼴 크기입니다.

부모 글꼴 크기가 20px일 때 1.2em은 1.2 × 20 = 24px로 다시 변환됩니다.

rem을 em으로, em을 rem으로 계산하는 방법

rem과 em은 서로 다른 글꼴 크기를 기준으로 하므로 두 단위 사이를 변환하려면 루트 글꼴 크기와 부모 글꼴 크기가 모두 필요합니다.

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

여기서 R은 루트 글꼴 크기이고 P는 부모 글꼴 크기입니다.

풀이 예시

루트 글꼴 크기가 16px이고 부모 글꼴 크기가 20px일 때 2rem은 다음과 같이 변환됩니다.

2 × (16 ÷ 20) = 1.6em

루트 글꼴 크기와 부모 글꼴 크기가 같으면 1rem은 항상 1em과 같습니다.

각 단위가 유용한 경우

픽셀은 1px 테두리나 고정 너비 아이콘처럼 크기가 변하지 않아야 하는 세부 요소에 적합합니다.

rem은 페이지 전체에서 일관되게 유지되어야 하는 간격과 글꼴 설정에 흔히 사용됩니다. 항상 루트 글꼴 크기를 기준으로 하므로 요소가 얼마나 깊이 중첩되어도 rem 값은 변하지 않습니다. 따라서 사용자가 브라우저의 기본 글꼴 크기를 키우면 rem 기반 레이아웃도 자동으로 조정되어 저시력 사용자가 읽는 데 도움이 됩니다.

em은 버튼처럼 하나의 독립적인 구성 요소 내부에서 잘 작동합니다. 이 경우 패딩이 버튼 자체의 글꼴 크기에 맞춰 조정될 수 있습니다. em의 일반적인 문제는 값이 누적된다는 것입니다. 중첩된 여러 요소에 각각 font-size: 1.2em을 사용하면 각 단계가 이전 단계의 값을 곱하므로 글꼴 크기가 의도보다 빠르게 커집니다.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

세 단계가 지나면 텍스트는 개발자가 단일 1.2em 규칙에서 예상할 수 있는 20%가 아니라 약 73% 커집니다.

변환기 사용 방법

  1. 픽셀, rem 또는 em 입력란에 값을 입력합니다.
  2. 나머지 두 입력란은 자동으로 업데이트되며, 소수점 이하 네 자리까지 반올림됩니다.
  3. 프로젝트의 <html> 요소에 맞게 루트 글꼴 크기를 설정합니다. 대부분의 브라우저에서 기본값은 16px이며 rem에만 영향을 줍니다.
  4. em 값이 들어갈 요소의 글꼴 크기에 맞게 부모 글꼴 크기를 설정합니다. em에만 영향을 줍니다.
  5. 입력란 옆의 복사 버튼을 사용하여 해당 값을 복사합니다.

두 글꼴 크기 입력란에는 픽셀 단위의 정수만 입력할 수 있으며, 허용되는 최솟값은 1px입니다. 재설정 버튼을 누르면 값이 지워지고 두 글꼴 크기가 모두 16px로 돌아갑니다.

입력란 아래에서 도구는 단위마다 막대를 하나씩 그립니다. 세 막대는 모두 같은 물리적 길이를 나타내므로 너비도 같게 표시되며, 변환이 올바른지 빠르게 확인할 수 있습니다. 막대는 실제 픽셀 길이가 300px 이하일 때 실제 길이로 그려집니다. 그보다 길면 맞춰 표시되도록 축소되므로 600px 값과 900px 값은 모두 끝이 300px에 옵니다. 픽셀 값이 0보다 클 때만 막대가 표시됩니다.

자주 묻는 질문

rem과 em의 차이는 무엇인가요? Rem은 항상 루트 요소의 글꼴 크기를 기준으로 합니다. Em은 가장 가까운 부모 요소의 글꼴 크기를 기준으로 합니다. rem 값은 페이지 어디에서나 동일하지만 em 값은 요소가 얼마나 깊이 중첩되어 있는지에 따라 달라질 수 있습니다.

브라우저는 기본 글꼴 크기로 왜 16px를 사용하나요? 16px는 별도의 스타일 지정 없이 일반적인 화면에서 읽기 편한 크기이기 때문에 주요 브라우저에서 오랫동안 기본 텍스트 크기로 사용되어 왔습니다. 웹 접근성 지침에서는 페이지 레이아웃을 망가뜨리지 않고 텍스트 크기를 200%까지 조정할 수 있도록 권장하며, 16px는 이를 위한 실용적인 시작점입니다.

62.5% 트릭이란 무엇인가요? html { font-size: 62.5%; }로 설정하면 기본 16px 루트 글꼴 크기가 10px로 바뀝니다. 62.5%의 16이 10이기 때문입니다. 이렇게 하면 rem 계산이 간단해집니다. 1.6rem은 16px이고 2.4rem은 24px이기 때문입니다.

px, rem, em 값은 음수가 될 수 있나요? 여백이나 CSS 변환처럼 음수 길이를 허용하는 속성에서는 가능합니다. CSS에서 패딩은 음수가 될 수 없으며 브라우저는 음수 패딩 값을 무시합니다. 변환기는 음수 값을 처리하지만, 막대에는 음의 너비가 없으므로 음수 값에 대해서는 막대를 그리지 않습니다.

모든 픽셀 값을 rem으로 변환해야 하나요? 반드시 그렇지는 않습니다. 테두리와 기타 세부 요소는 일반적으로 픽셀 단위로 유지합니다. 이러한 요소는 글꼴 크기에 맞춰 조정할 필요가 거의 없고, 서브픽셀 너비에서는 고르지 않게 보일 수 있기 때문입니다. rem은 사용자의 글꼴 크기 설정에 따라 조정되어야 하는 간격과 글꼴 설정에 적합합니다.

단위 선택이 페이지 성능에 영향을 주나요? 아니요. 브라우저는 레이아웃을 계산하는 동안 모든 CSS 길이를 동일한 내부 값으로 변환하므로 px, rem, em은 같은 속도로 렌더링됩니다. 단위 선택은 속도가 아니라 유지 관리성과 접근성에 영향을 줍니다.