24 px → rem 환산
- 값
- 24
- 변환 전
- 픽셀 (px)
- 변환 후
- rem (루트 글꼴 크기)
- 루트 글꼴 크기 (rem)
- 16 px
- 변환된 값
- 1.5 rem
- CSS 표기
- 1.5rem
- 픽셀로 표시
- 24 px
검증 출처: 예제 검산: CSS Values 3 §6.1: 1rem = 루트 글꼴 크기 (16 px 브라우저 기본값); 24 / 16 = 1.5
CSS 단위 변환기 (px를 rem, em, pt로)
루트 요소 글꼴 크기, 부모 요소 글꼴 크기 및 DPI를 사용하여 px를 rem, em, pt, 파이카, 인치, mm로 변환합니다. CSS는 1 in = 96 px = 72 pt로 정의합니다.
변환된 값
rem
변환된 값: 1.5 rem
- CSS 표기
- 1.5rem
- 픽셀로 표시
- 24px
루트 글꼴 16 px, 인치당 96 픽셀일 때 24px는 1.5rem입니다.
픽셀 크기와 글꼴 크기 비교
모든 단위로 표시한 24px
| 단위 | 값 | 정의 |
|---|---|---|
| 픽셀 (px) | 24px | 1 px |
| 포인트 (pt) | 18pt | 1 pt = 1/72 in |
| 파이카 (pc) | 1.5pc | 1 pc = 12 pt = 1/6 in |
| 인치 (in) | 0.25in | 1 in = DPI px |
| 센티미터 (cm) | 0.635cm | 1 cm = 1/2.54 in |
| 밀리미터 (mm) | 6.35mm | 1 mm = 1/25.4 in |
| 사분의 일 밀리미터 (Q) | 25.4Q | 1 Q = 0.25 mm |
| em (부모 글꼴 크기) | 1.5em | 1 em = parent font size |
| rem (루트 글꼴 크기) | 1.5rem | 1 rem = root font size |
| 부모 글꼴 크기의 백분율 (%) | 150% | 100% = parent font size |
계산 방법 S
px당 픽셀 수
1 px
픽셀 단위 값
rem당 픽셀 수로 나누기
1 rem = root font size
CSS 단위 변환기 (px를 rem, em, pt로) 소개
CSS 길이는 픽셀을 거쳐 환산합니다. 절대 단위는 1 in = 2.54 cm = 96 px = 72 pt = 6 pc, 1 Q는 사분의 일 밀리미터입니다. 상대 단위는 페이지에 따라 1 rem은 루트 글꼴, font-size의 1 em(또는 100%)은 부모 글꼴 크기입니다. 먼저 px로 바꾸고 목표 단위당 px로 나눕니다.
프런트엔드 개발자는 디자인 px를 rem으로 바꿔 사용자 브라우저 글꼴 설정을 따르게 합니다. 기본 루트 16 px라면 24 px는 1.5 rem입니다. 인쇄에서는 PPI 필드를 쓰며 300 DPI의 10 mm 로고는 약 118픽셀이 필요합니다. 글자가 사용자 설정을 따르려면 루트 글꼴 크기도 그 설정을 반영해야 합니다.
CSS 인치가 화면의 실측 인치와 같을 필요는 없습니다. CSS는 인치당 96 px로 정의하며 기준 픽셀의 시각은 약 0.0213°입니다. 구현은 절대 단위를 물리적 측정이나 픽셀에 맞출 수 있고, 기기 매핑·시청 거리·인쇄 배율에 따라 자와 맞는지가 달라집니다.
공식의 xₛ·xₜ는 원래 값·목표 값, pₛ·pₜ는 각 단위당 픽셀 수입니다. 입력한 글꼴 크기와 픽셀 밀도를 사용합니다.
글꼴의 기준 크기 정하기
값과 두 단위 외에 rem의 루트 글꼴, em과 %의 부모 글꼴 크기를 입력합니다. 루트가 16 px 이면 24 px = 1.5 rem, 루트가 20 px 이면 24 px = 1.2 rem 입니다. 같은 px 값도 기준이 바뀌면 rem 값이 달라집니다.
| 값 | 원래 단위 | 목표 단위 | 계산 조건 | 환산값 |
|---|---|---|---|---|
| 24 | px | rem | 루트 16 px | 1.5 |
| 24 | px | rem | 루트 20 px | 1.2 |
| 12 | pt | px | 96 픽셀/in | 16 |
| 1 | pc | pt | 96 픽셀/in | 12 |
| 100 | % | em | 부모 글꼴 16 px | 1 |
| 10 | mm | px | 300 픽셀/in | 118.110236 |
CSS 픽셀과 물리 픽셀 구별하기
CSS의 관계는 1 in = 96 px = 72 pt 입니다. 밀도를 다른 값으로 지정하는 모드는 그 밀도의 물리 픽셀을 셉니다. 10 mm × 300 ÷ 25.4 ≈ 118.110236 px 은 물리 픽셀 계산이며 브라우저의 CSS 관계를 바꾸거나 화면의 실제 길이를 자동으로 재는 기능이 아닙니다.
속성에 따라 상대 단위의 기준이 다름
여기서 em과 %는 font-size를 설정할 때의 부모 글꼴을 기준으로 하며 rem은 루트를 기준으로 합니다. 모든 CSS 속성이 같은 백분율 기준을 쓰지는 않고 em도 사용 위치에 따라 현재 요소를 참조합니다. 확대율이나 기기 픽셀 비율만으로 실측 길이를 정하지 마세요.
계산 예제
12 pt → px 환산
- 값
- 12
- 변환 전
- 포인트 (pt)
- 변환 후
- 픽셀 (px)
- 루트 글꼴 크기 (rem)
- 16 px
- 변환된 값
- 16 px
- CSS 표기
- 16px
검증 출처: 예제 검산: CSS Values 3 §6.2: 1pt = 1/72 in, 1in = 96px; 12 × 96/72 = 16
1인치를 CSS 픽셀로 표시
- 값
- 1
- 변환 전
- 인치 (in)
- 변환 후
- 픽셀 (px)
- 루트 글꼴 크기 (rem)
- 16 px
- 변환된 값
- 96 px
검증 출처: 예제 검산: CSS Values 3 §6.2: 1in = 96px
1.5 rem를 px로 환산
- 값
- 1.5
- 변환 전
- rem (루트 글꼴 크기)
- 변환 후
- 픽셀 (px)
- 루트 글꼴 크기 (rem)
- 16 px
- 변환된 값
- 24 px
검증 출처: 예제 검산: 1 rem = 루트 글꼴 크기 (16 px); 1.5 × 16
자주 묻는 질문
1 rem은 몇 픽셀인가요?
기본값은 16픽셀입니다. rem은 루트 html 글꼴 크기이며 주요 브라우저는 사용자나 html { font-size }가 바꾸지 않으면 16 px입니다. 이 기본값에서 html { font-size: 62.5% }는 1 rem = 10 px가 됩니다. rem은 W3C CSS Values and Units의 정의지만 16 px는 브라우저 기본값이지 규격 자체의 값은 아닙니다.
px를 pt로 어떻게 환산하나요?
px에 0.75를 곱합니다. pt에서 px는 4/3(약 1.333)을 곱합니다. W3C CSS의 1 in = 96 px = 72 pt에 따라 1 px = 72/96 pt입니다. 16 px 본문은 12 pt, 워드프로세서 11 pt는 약 14.67 px입니다.
em과 rem은 어떻게 다른가요?
rem은 항상 루트 글꼴, em은 현재 글꼴을 참조하지만 font-size 자체에서는 부모 글꼴을 참조합니다. em은 중첩되어 1.2em 목록 안의 1.2em 목록은 두 목록 설정 전 기준 글꼴 크기의 1.44배입니다. 루트 16 px에서 1.2rem은 깊이에 관계없이 19.2 px입니다.
글꼴 크기에 px와 rem 중 무엇을 써야 하나요?
사용자 브라우저 글꼴 설정을 따르게 하려면 rem을 쓰고 루트 글꼴 크기도 그 설정을 반영하게 하세요. 페이지 확대는 px와 rem을 모두 확대하며 rem·em·백분율은 루트나 부모 문맥을 통해 설정을 따를 수 있습니다. WCAG 2.1 성공 기준 1.4.4(AA)는 내용·기능 손실 없이 200%로 확대할 수 있어야 한다고 합니다. px도 브라우저 확대로 이를 충족할 수 있고 rem도 루트 문맥이 허용하면 글꼴 설정을 따릅니다.
CSS 인치는 실제 인치와 같나요?
CSS 인치가 화면의 실측 인치와 같을 필요는 없습니다. CSS는 1 in = 96 px로 정의합니다. W3C 기준 픽셀은 96 DPI 화면을 28 in 거리에서 본 한 픽셀로, 시각은 약 0.0213°입니다. 기기 매핑과 시청 거리가 달라 휴대폰의 96 px 상자는 실제 1인치보다 작을 수도 있습니다. 실제 크기 인쇄에서는 1 in가 25.4 mm에 대응하지만 인쇄 배율과 보정도 출력 크기에 영향을 줍니다.
이 계산기 소개
출처
출처와 대조하여 검증
이 계산기에는 독립적인 출처에서 답을 얻은 계산 예제가 7개 있습니다. 테스트 모음에서 실행되며 여기에서도 실행할 수 있습니다.