픽셀 → EM/REM 변환기
모든 도구
무료
실시간 표와 바로 복사 가능한 CSS로 px, rem, em, pt, %를 변환
변환할 값
px
px
rem은 루트 글꼴 크기를 기준으로 하며, em과 %는 상위 요소를 기준으로 합니다.
변환된 값
px
0
rem
0
em
0
pt
0
%
0
일반적인 값
| PX | REM | EM | PT |
|---|---|---|---|
| 10 | — | — | — |
| 12 | — | — | — |
| 14 | — | — | — |
| 16 | — | — | — |
| 18 | — | — | — |
| 20 | — | — | — |
| 24 | — | — | — |
| 28 | — | — | — |
| 32 | — | — | — |
| 40 | — | — | — |
| 48 | — | — | — |
| 64 | — | — | — |
CSS 스니펫
픽셀 → EM/REM 변환기 소개
픽셀-EM/REM 변환기는 CSS 길이 값을 px, rem, em, pt, % 사이에서 변환합니다. 다섯 단위 중 하나로 값을 입력하면 실시간 표에 나머지 단위의 환산값이 모두 표시되며, 스타일시트에 바로 붙여넣을 수 있는 CSS 스니펫도 함께 제공됩니다.
변환은 CSS가 실제로 단위를 해석하는 방식을 그대로 따릅니다 — rem은 루트 글꼴 크기에 상대적이고, em과 %는 부모 요소의 글꼴 크기에 상대적입니다. 두 기준 크기 모두 수정 가능하므로 16px 루트에 14px 컴포넌트를 모델링하거나 사용 중인 어떤 디자인 시스템 스케일도 재현할 수 있습니다.
자주 쓰는 값들을 모은 표는 디자이너가 가장 많이 찾는 크기를 매핑해 두어 “24px는 rem으로 몇인가” 같은 질문에 한눈에 답합니다. 이 도구는 무료이며 입력하는 즉시 갱신되고, 고정 픽셀 시안을 접근성 높은 확장 가능한 rem 기반 CSS로 변환할 때 필수적인 도구입니다.
픽셀 → EM/REM 변환기 사용 방법
- 변환할 값을 입력하고 단위를 선택하세요: px, rem, em, pt 또는 %.
- 기본값 16px와 다르다면 루트 글꼴 크기(rem용)와 부모 글꼴 크기(em, %용)를 조정하세요.
- 실시간 표에서 변환된 값을 확인하세요.
- 생성된 CSS 스니펫이나 자주 쓰는 값 표의 아무 값이나 복사하세요.
자주 묻는 질문
rem은 항상 루트(html) 글꼴 크기에 상대적이고, em은 현재 요소가 상속한 글꼴 크기에 상대적입니다. 중첩된 em 값은 누적되기 때문에 레이아웃에서는 대개 rem이 더 예측하기 쉽습니다.
기본값인 16px 루트 글꼴 크기에서는 16px가 정확히 1rem입니다. 루트 크기 필드를 바꾸면 변환기가 다시 계산합니다 — 루트가 18px이면 16px는 약 0.889rem이 됩니다.
rem 값은 사용자가 브라우저의 기본 글꼴 크기를 바꾸면 함께 확대·축소되어 더 큰 글자가 필요한 사람도 텍스트를 읽을 수 있게 해줍니다. 고정된 px 크기는 이런 설정을 무시하므로 접근성을 해칩니다.
CSS는 1pt를 1인치의 1/72로, 1px를 1/96로 정의하므로 1pt = 1.333px, 12pt = 16px입니다. 포인트는 주로 인쇄용 스타일시트와 워드프로세서에서 가져온 문서에 등장합니다.
글꼴 크기에서 %는 em과 마찬가지로 부모 요소의 글꼴 크기에 상대적입니다: 100%는 부모 크기와 같으므로 16px 부모의 87.5%는 14px입니다. 상황에 맞게 부모 크기 필드를 설정하세요.
인기 검색어
px rem 변환기
px em 변환기
픽셀 rem 변환
rem px 변환
css 단위 변환기
px em rem 계산기
도움이 필요하신가요?
이 도구에서 문제를 발견하셨나요? 저희 팀에 알려주세요.