Pixel-REM/EM 변환기
CSS를 위해 px를 rem과 em으로 변환하세요. 루트 및 부모 글꼴 크기를 조정할 수 있습니다 — rem과 em은 서로 다른 기준에 의존하기 때문입니다.
REM은 항상 루트(<html>) 요소의 글꼴 크기를 기준으로 합니다. EM은 현재 요소 자체의 글꼴 크기를 기준으로 하므로 사용되는 위치마다 다를 수 있습니다. 위의 부모 크기를 조정해 EM 결과가 REM과 독립적으로 어떻게 바뀌는지 확인해 보세요.
즉시 & 실시간
입력하는 즉시 모든 단위가 업데이트됩니다. "변환" 버튼도, 기다릴 필요도 없습니다.
REM과 EM을 별도로 유지
루트와 부모 글꼴 크기를 별도로 입력할 수 있습니다. 서로 다른 개념이기 때문입니다.
설계부터 프라이버시 보호
모든 처리가 브라우저 내에서만 이루어집니다. 어떤 것도 업로드되거나 기록되지 않습니다.
온라인으로 PX를 REM과 EM으로 변환하기
기본 16px 루트 글꼴 크기에서는 16px가 1rem과 같습니다. CurePDF의 변환기는 지정한 루트 및 부모 글꼴 크기를 사용해 픽셀 값에서 rem과 em을 계산하거나 그 반대로 변환합니다 — 모든 사이트가 브라우저 기본값을 사용하는 것은 아니기 때문입니다.
PX에서 REM으로의 변환 원리
계산 예시 (16px 루트): 16px / 16 = 1rem. 20px / 16 = 1.25rem. 24px / 16 = 1.5rem.
REM vs EM: 같은 것이 아닙니다
REM은 항상 루트<html> 요소의 글꼴 크기를 기준으로 합니다 — 페이지 전체에서 단 하나의 값입니다. EM은 현재 요소 자체의 글꼴 크기를 기준으로 하므로 중첩된 콘텐츠의 각 단계마다 다를 수 있습니다. 즉, 같은 픽셀 값이라도 사용되는 위치에 따라 다른 EM 값으로 변환될 수 있지만, REM 값은 항상 동일하게 변환됩니다.
CSS에서 픽셀 대신 REM을 사용하는 이유는?
사용자가 접근성 설정에서 브라우저의 기본 글꼴 크기를 변경하면 REM 값은 자동으로 크기가 조정되지만, 고정된 픽셀 값은 그렇지 않습니다. 그래서 텍스트 크기 지정에는 rem이 더 접근성 있는 기본값이며, em은 크기가 실제로 부모 요소에 맞춰 조정되어야 하는 경우(예: 버튼의 글꼴 크기에 맞춰 커져야 하는 패딩)를 위해 사용됩니다.
자주 묻는 질문
16px는 rem으로 얼마인가요?
기본 루트 글꼴 크기 16px에서 16px는 1rem에 해당합니다. 공식은 rem = px / 루트 글꼴 크기입니다.
REM과 EM은 같은 것인가요?
아니요. REM은 항상 루트(html) 요소의 글꼴 크기를 기준으로 합니다. EM은 현재 요소 자체의 글꼴 크기를 기준으로 하며, 중첩된 콘텐츠의 각 단계마다 다를 수 있습니다 — 따라서 같은 픽셀 값이라도 사용되는 위치에 따라 다른 EM 값으로 변환될 수 있습니다.
CSS에서 픽셀 대신 REM을 사용하는 이유는 무엇인가요?
사용자가 (접근성을 위해) 브라우저의 기본 글꼴 크기를 변경하면 REM 값은 자동으로 조정되지만 고정된 픽셀 값은 그렇지 않습니다 — 그래서 텍스트 크기 지정에는 REM이 더 접근성이 좋은 단위입니다.
기본 루트 글꼴 크기는 얼마인가요?
모든 주요 브라우저의 기본 설정에서 16px입니다. 이 변환기는 기본값으로 16px를 사용하지만 사이트의 실제 CSS에 맞게 변경할 수 있습니다.