px rem 변환: px, rem, pt, em, mm
최종 업데이트:
px
rem은 이 크기를 기준으로 계산됩니다. 여기서는 em과 %도 이 크기를 기준으로 하지만, CSS에서는 부모 요소를 따르므로 부모가 글꼴 크기를 바꾸지 않은 경우에만 rem과 같습니다.
공식
1 px = 0.0625 rem모든 결과
px 1
rem 0.0625
em 0.0625
% 6.25
pt 0.75
pc 0.0625
in 0.0104167
cm 0.0264583
mm 0.264583
빠른 변환표: 픽셀 → rem(루트 em)
| 값 (px) | 결과 (rem) |
|---|---|
| 1 px | 0.0625 rem |
| 8 px | 0.5 rem |
| 10 px | 0.625 rem |
| 12 px | 0.75 rem |
| 14 px | 0.875 rem |
| 16 px | 1 rem |
| 18 px | 1.125 rem |
| 20 px | 1.25 rem |
| 24 px | 1.5 rem |
| 32 px | 2 rem |
| 48 px | 3 rem |
| 64 px | 4 rem |
px, rem, pt에 대하여
CSS는 1인치를 96 px로 정하므로, 1/72 인치인 1 pt는 1.333 px이고 1 mm는 3.78 px입니다. rem과 em은 상대 단위입니다. 1 rem은 루트 글꼴 크기로, 방문자가 바꾸지 않는 한 모든 주요 브라우저에서 16 px이므로 24 px는 1.5 rem입니다. 스타일시트가 다른 루트 크기를 지정했다면 입력란 위의 기준에 그 값을 입력하세요. em은 부모 요소의 글꼴 크기를 따르므로, 부모가 이를 바꾸지 않은 경우에만 rem과 같습니다.
흔한 글자와 요소의 크기
기본 기준 16 px일 때의 값입니다. CSS는 1인치를 96 px로 정하므로 pt와 mm 열은 기준이 바뀌어도 그대로이고, rem 열만 기준에 따라 달라집니다.
| 크기 | rem | pt | mm |
|---|---|---|---|
| 10 pt 글자(각주) | 0.8333 | 10 | 3.528 |
| 브라우저의 기본 글자 크기 | 1 | 12 | 4.233 |
| 워드 프로세서의 12 pt 글자 | 1 | 12 | 4.233 |
| 기본 h2 제목 | 1.5 | 18 | 6.35 |
| WCAG 2.2(2.5.8)의 최소 대상 크기 | 1.5 | 18 | 6.35 |
| 기본 h1 제목 | 2 | 24 | 8.467 |
| 1센티미터 | 2.362 | 28.35 | 10 |
| 1인치 | 6 | 72 | 25.4 |
포인트와 픽셀의 역사
활자의 크기는 화면이 생기기 훨씬 전부터 포인트로 측정되었습니다. 활자를 만드는 사람들은 줄이 가지런히 맞는 활자를 만들려면 공통 단위가 필요했습니다. 포인트를 1/72 인치로 굳힌 것은 컴퓨터입니다.
- 피에르시몽 푸르니에는 활판 포인트로 측정한 활자 크기표를 펴냈습니다. 이 척도는 인치를 12개의 선으로, 각 선을 6포인트로 나누었습니다.
- 미국 활자 주조업자 협회가 활자 몸체에 포인트 제도를 채택했습니다. 이 제도에서 논파렐(nonpareil)은 6포인트, 파이카는 12포인트입니다.
- Adobe가 PostScript를 발표했습니다. 페이지에서 길이의 단위는 1/72 인치이며, Adobe의 표현으로는 인쇄에서 쓰는 포인트와 대략 같습니다.
- CSS 2.1이 W3C 권고안이 되었습니다. 1인치를 96 px와 72 pt로 정하므로 1 px는 0.75 pt이며, 픽셀은 팔 길이 거리에서 본 96 dpi 화면의 점 하나를 기준으로 합니다.
출처: