PX↔REM 변환기 (PX to REM Converter)

px를 rem으로, rem을 px로 즉시 변환하는 무료 도구입니다. 루트 요소(html)의 font-size 기준값을 자유롭게 변경하여 실시간으로 변환 결과를 확인할 수 있습니다.

마지막 업데이트: 2026-10-18

PX→REM 변환표 (기준 16px)

루트 요소의 font-size가 브라우저 기본값인 16px일 때, 자주 쓰는 px 값에 대응하는 rem 값입니다.

px	rem
8px	0.5rem
10px	0.625rem
12px	0.75rem
14px	0.875rem
16px	1rem
18px	1.125rem
20px	1.25rem
24px	1.5rem
28px	1.75rem
32px	2rem
36px	2.25rem
40px	2.5rem
48px	3rem
64px	4rem

PX⇔REM 변환 도구란

px으로 적은 크기를 rem으로, rem으로 적은 크기를 px으로 서로 바꿔 줍니다. 루트 요소(html)의 font-size 기준값은 마음대로 바꿀 수 있고, 환산 결과가 곧바로 따라옵니다.

먼저 짚어 둘 것은, rem이 기대는 것이 루트 요소의 글자 크기이며 그 크기는 사용자가 바꿀 수 있다는 점입니다. 브라우저 설정의 「글꼴 크기」를 키우면 rem으로 적은 모든 것이 함께 커지는데, 그것이 바로 rem의 뜻입니다. 그러므로 CSS에 html { font-size: 16px } 라고 적어서는 안 됩니다. 그러면 사용자의 설정을 눌러 버려, 눈이 불편한 사람이 글자를 키울 길까지 막습니다. 기준값을 손보고 싶다면 % 나 rem 같은 상대적인 표기를 쓰십시오.

다음으로, em 과 rem 의 차이는 겹쳐 쌓이느냐에 있습니다. em 은 자기가 놓인 요소의 글자 크기를 기준으로 삼으므로 겹겹이 중첩하면 계속 곱해집니다. rem 은 언제나 루트 요소만 보므로 몇 겹을 두르든 달라지지 않습니다.

또 한 군데 걸리기 쉬운 곳이 있습니다. 미디어 쿼리 안의 em 은 루트 요소의 글자 크기가 아니라 브라우저의 기본값을 기준으로 삼습니다. html의 글자 크기를 줄여도 미디어 쿼리의 분기점은 따라 움직이지 않습니다.

쓰는 순서

기준값을 정합니다 대다수 브라우저의 기본값은 16px입니다. 망설여지면 16 그대로 두어도 됩니다.
px이나 rem을 넣습니다 어느 한쪽에 값을 넣으면 다른 쪽에 환산 결과가 곧바로 나타납니다.
CSS 표기를 복사합니다 단위가 붙은 문자열을 그대로 가져갈 수 있습니다.
대조표를 봅니다 자주 쓰는 크기를 한눈에 늘어놓아 하나씩 고르기 좋습니다.

더 잘 활용하기 위한 팁

브라우저 기본값에서는 1rem이 16px과 같지만, 저시력 사용자는 브라우저의 기본 텍스트 크기를 키워서 사용하는 경우가 많습니다. rem 단위는 이 설정에 자동으로 따라가지만 px 단위는 그렇지 않습니다.
미디어 쿼리(@media)의 분기점은 전통적으로 px로 지정하는 경우가 많지만, font-size나 padding·margin 같은 여백에는 rem을 사용하면 사용자가 텍스트 크기 설정을 바꿔도 전체적인 레이아웃 균형이 유지되기 쉽습니다.
일부 프로젝트에서는 html { font-size: 62.5%; }로 지정해 1rem을 10px로 맞춰 계산을 쉽게 하기도 합니다(1.6rem = 16px). 위 기준값 입력란에 10을 입력하면 같은 방식으로 변환해 볼 수 있습니다.
한 프로젝트 안에서 rem과 em을 함께 쓸 때는, 페이지 전체 레이아웃 값은 rem으로, 재사용 가능한 컴포넌트 내부 여백은 em으로 나누어 사용하면 유지보수가 쉬워집니다.

이럴 때 쓸 수 있습니다

시안의 수치를 CSS로 옮길 때

시안은 px으로 오는 것이 보통입니다. 기준값을 정해 두면 기계적으로 rem으로 바꿀 수 있습니다.

기존 프로젝트의 단위를 맞출 때

px과 rem이 섞인 코드를 정리할 때 대조표로 곁에 둘 수 있습니다.

루트 기준값을 바꿔 영향을 볼 때

기준값을 바꾸면 rem으로 적은 모든 자리가 함께 움직입니다. 그 폭을 미리 확인할 수 있습니다.

미디어 쿼리의 분기점을 정할 때

미디어 쿼리의 em은 루트가 아니라 브라우저 기본값을 기준으로 삼습니다. 환산의 전제가 다릅니다.

이 분야의 용어

rem: 루트 요소(html)의 글자 크기를 기준으로 삼는 상대 단위입니다. 아무리 깊이 중첩해도 기준은 달라지지 않습니다.
em: 자기가 놓인 요소의 글자 크기를 기준으로 삼는 상대 단위입니다. 겹겹이 중첩하면 계속 곱해집니다.
루트 요소: 문서의 가장 바깥에 있는 html 요소입니다. rem의 환산은 모두 그 글자 크기를 바탕으로 삼습니다.
브라우저 기본 글자 크기: 대다수 환경에서 16px입니다. 사용자가 바꿀 수 있으며, 바로 그 점을 존중해야 합니다.
html의 글자 크기를 px으로 적기: 사용자의 설정을 눌러 버리므로 피해야 합니다. 기준값을 손보려면 % 같은 상대 표기를 쓰십시오.
미디어 쿼리 안의 em: 루트가 아니라 브라우저 기본값을 기준으로 삼습니다. html의 글자 크기를 바꿔도 분기점은 움직이지 않습니다.

자주 묻는 질문

아닙니다. 1rem은 루트 요소(<html>)의 font-size를 기준으로 하며, 대부분의 브라우저에서 기본값이 16px일 때만 1rem이 16px과 같습니다. CSS에서 루트 요소의 font-size를 바꾸거나 사용자가 브라우저의 기본 텍스트 크기를 변경하면 1rem의 실제 픽셀 값도 달라집니다.

rem은 항상 루트 요소의 font-size를 기준으로 하므로 요소가 얼마나 중첩되어 있어도 일정하게 유지됩니다. em은 해당 요소의 부모 요소 font-size를 기준으로 하므로, 요소가 중첩될수록 값이 누적되어 실제 크기가 예상과 달라지기 쉽습니다.

rem을 사용하면 사용자가 브라우저의 기본 텍스트 크기나 운영체제의 접근성 기능으로 글자 크기를 키웠을 때 텍스트 크기도 함께 커집니다. px로 고정하면 이런 설정이 반영되지 않아 저시력 사용자가 읽기 어려워질 수 있습니다.

디자인의 px 값을 프로젝트의 루트 font-size(기본값 16)로 나누면 rem 값이 됩니다. 프로젝트에서 루트 font-size를 다른 값으로 바꿨다면, 변환 전에 위 기준값 입력란에 그 값을 입력해야 실제 CSS와 일치하는 결과를 얻을 수 있습니다.

여담 ― rem이 CSS 명세에 들어오기까지

rem 단위가 CSS 명세에 처음 등장한 것은 W3C가 2006년 9월에 공개한 초안 「CSS3 Values and Units」이며, 널리 쓰이기 전까지 웹사이트들은 거의 모두 px 또는 em으로 텍스트와 여백 크기를 지정했습니다. 당시 em은 부모 요소의 font-size를 기준으로 하기 때문에 요소가 중첩될수록 기준이 어긋나 복잡한 레이아웃에서는 의도하지 않은 크기가 되기 쉬웠습니다.

rem은 이 문제를 해결하기 위해 고안된 단위입니다. 언제나 하나만 존재하는 루트 요소를 기준으로 삼기 때문에 요소가 얼마나 중첩되더라도 계산이 흐트러지지 않습니다. rem을 지원하지 않는 Internet Explorer 8 이하를 지원해야 했던 시기에는 px 값을 먼저 적고 rem 값을 뒤에 함께 적는 방식(font-size: 16px; font-size: 1rem;)이 일반적이었습니다(IE9·IE10도 font 단축 속성과 가상 요소에서는 rem을 무시하는 부분 지원이었습니다). 오래된 IE를 지원할 필요가 없어진 2010년대 중반 이후에는 이런 대체 표기가 필요 없어졌습니다.

요즘은 접근성 관점에서 웹사이트 전체의 글자 크기와 여백을 rem으로 통일해, 사용자가 브라우저의 텍스트 크기 설정을 바꾸었을 때 페이지 전체가 깨지지 않고 자연스럽게 확대·축소되도록 설계하는 방식이 정착되어 있습니다. WCAG(Web Content Accessibility Guidelines) 같은 지침에서도 텍스트 크기를 고정 단위에만 의존하지 않도록 권장하고 있습니다.

모든 여담 보기