px - rem - em 변환기
설정한 루트 및 기준 글꼴 크기를 바탕으로 px, rem, em 단위를 상호 변환해 보세요. 한 필드를 수정하면 나머지 두 필드가 실시간으로 자동 업데이트됩니다.
변환 값
자주 쓰는 px → rem 변환표 (16px 기준)
| px | rem |
|---|---|
| 8 | 0.5 |
| 12 | 0.75 |
| 14 | 0.875 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 32 | 2 |
| 40 | 2.5 |
| 48 | 3 |
모든 변환은 브라우저에서 직접 실행됩니다. 입력한 어떤 데이터도 BroBroGo 서버로 전송되지 않습니다.
자주 묻는 질문
px, rem, em의 차이는 무엇인가요?
px는 고정된 길이 단위입니다. rem은 페이지의 루트(최상위) 글꼴 크기를 기준으로 계산되므로, 루트가 16px일 때 1rem은 16px가 됩니다. 반면 em은 해당 단위가 속한 요소 자체의 글꼴 크기를 기준으로 계산됩니다. 글자 크기와 여백을 rem 단위로 설계하면, 독자가 브라우저의 기본 글꼴 크기를 변경할 때 모든 요소가 유동적으로 비례하여 크기가 조절됩니다.
왜 별도의 em 기준 크기가 필요한가요?
em 단위는 항상 루트가 아닌 해당 요소 자체의 글꼴 크기를 기준으로 삼습니다. em 값을 정확히 계산하려면 em 기준 크기 필드를 해당 요소의 글꼴 크기와 동일하게 설정해 주세요. 두 크기가 일치할 때는 루트 크기와 동일하게 유지하면 됩니다.
루트 글꼴 크기가 16px이 아닌 경우는 어떻게 하나요?
사용 중인 CSS에 맞게 루트 글꼴 크기 필드를 수정하면 모든 rem 값이 실시간으로 업데이트됩니다. 아래의 요약 표는 대부분의 사이트가 기본값으로 시작하는 일반적인 16px 루트 기준의 유용한 가이드입니다.