픽셀 단위 변환기
다양한 CSS 단위를 픽셀로 변환하거나 픽셀을 다른 단위로 변환할 수 있습니다.
px
px
변환 결과:
결과가 여기에 표시됩니다
단위 변환 정보
- 픽셀 (px): 화면의 점 하나를 나타내는 단위
- 포인트 (pt): 인쇄 산업에서 사용되는 단위, 1pt = 1/72인치
- EM (em): 현재 요소의 글꼴 크기를 기준으로 하는 상대 단위
- REM (rem): 루트 요소(html)의 글꼴 크기를 기준으로 하는 상대 단위
- 센티미터 (cm): 길이의 미터법 단위, 1cm = 10mm
- 밀리미터 (mm): 길이의 미터법 단위, 1mm = 0.1cm
- 인치 (in): 영국식 길이 단위, 1in = 2.54cm = 96px
CSS 단위 변환 정보
일반적인 단위 변환 표
| 픽셀 (px) | 포인트 (pt) | EM (em) | REM (rem) | 센티미터 (cm) | 밀리미터 (mm) | 인치 (in) |
|---|---|---|---|---|---|---|
| 1px | 0.75pt | 0.0625em | 0.0625rem | 0.0264cm | 0.2645mm | 0.0104in |
| 8px | 6pt | 0.5em | 0.5rem | 0.2117cm | 2.1167mm | 0.0833in |
| 12px | 9pt | 0.75em | 0.75rem | 0.3175cm | 3.175mm | 0.125in |
| 16px | 12pt | 1em | 1rem | 0.4233cm | 4.2333mm | 0.1667in |
| 24px | 18pt | 1.5em | 1.5rem | 0.635cm | 6.35mm | 0.25in |
| 32px | 24pt | 2em | 2rem | 0.8467cm | 8.4667mm | 0.3333in |
| 48px | 36pt | 3em | 3rem | 1.27cm | 12.7mm | 0.5in |
| 64px | 48pt | 4em | 4rem | 1.6933cm | 16.9333mm | 0.6667in |
| 96px | 72pt | 6em | 6rem | 2.54cm | 25.4mm | 1in |
| 128px | 96pt | 8em | 8rem | 3.3867cm | 33.8667mm | 1.3333in |
단위 변환 공식
픽셀 (px)에서 다른 단위로 변환
- 픽셀 → 포인트: pt = px × 72 ÷ 96
- 픽셀 → EM/REM: em/rem = px ÷ 기본 글꼴 크기(일반적으로 16px)
- 픽셀 → 센티미터: cm = px × 2.54 ÷ 96
- 픽셀 → 밀리미터: mm = px × 25.4 ÷ 96
- 픽셀 → 인치: in = px ÷ 96
다른 단위에서 픽셀 (px)로 변환
- 포인트 → 픽셀: px = pt × 96 ÷ 72
- EM/REM → 픽셀: px = em/rem × 기본 글꼴 크기(일반적으로 16px)
- 센티미터 → 픽셀: px = cm × 96 ÷ 2.54
- 밀리미터 → 픽셀: px = mm × 96 ÷ 25.4
- 인치 → 픽셀: px = in × 96
단위 설명
절대 단위
- 픽셀 (px): 화면의 점 하나를 나타내는 단위입니다. 웹 디자인에서 가장 기본적인 단위로, 디스플레이의 해상도에 따라 실제 크기가 달라질 수 있습니다.
- 포인트 (pt): 인쇄 산업에서 주로 사용되는 단위로, 1pt는 1/72인치입니다. 주로 인쇄물의 글꼴 크기를 지정할 때 사용됩니다.
- 센티미터 (cm): 미터법 단위로, 1cm는 10mm입니다. 실제 물리적 길이를 나타내며, 인쇄물에서 주로 사용됩니다.
- 밀리미터 (mm): 미터법 단위로, 1mm는 0.1cm입니다. 작은 물리적 길이를 나타낼 때 사용됩니다.
- 인치 (in): 영국식 길이 단위로, 1인치는 2.54cm입니다. 디스플레이 크기를 표현할 때 자주 사용됩니다.
상대 단위
- EM (em): 현재 요소의 글꼴 크기를 기준으로 하는 상대 단위입니다. 예를 들어, 글꼴 크기가 16px인 요소에서 1em은 16px와 같습니다. 중첩된 요소에서는 상속된 글꼴 크기에 따라 달라집니다.
- REM (rem): 루트 요소(html)의 글꼴 크기를 기준으로 하는 상대 단위입니다. 중첩 수준에 관계없이 일관된 크기를 유지하므로 반응형 디자인에 유용합니다.
- 퍼센트 (%): 부모 요소의 크기를 기준으로 하는 상대적인 크기입니다. 반응형 레이아웃을 만들 때 자주 사용됩니다.
- 뷰포트 단위 (vw, vh): 브라우저 창의 크기를 기준으로 하는 단위입니다. 1vw는 뷰포트 너비의 1%, 1vh는 뷰포트 높이의 1%입니다.
단위 선택 가이드
언제 어떤 단위를 사용해야 할까요?
- 픽셀 (px): 정확한 크기가 필요할 때 사용합니다. 예: 테두리, 그림자, 아이콘 등
- EM/REM (em/rem): 반응형 디자인과 접근성을 고려할 때 사용합니다. 특히 글꼴 크기, 여백, 패딩에 적합합니다.
- 퍼센트 (%): 부모 요소에 상대적인 크기가 필요할 때 사용합니다. 레이아웃 구성에 유용합니다.
- 뷰포트 단위 (vw, vh): 화면 크기에 비례하는 요소를 만들 때 사용합니다. 전체 화면 레이아웃이나 대형 타이포그래피에 적합합니다.
- 물리적 단위 (cm, mm, in): 인쇄용 스타일시트를 작성할 때 주로 사용합니다.
브라우저 호환성
대부분의 현대 브라우저는 모든 CSS 단위를 지원합니다. 그러나 오래된 브라우저에서는 일부 단위(특히 rem, vw, vh)가 제대로 지원되지 않을 수 있습니다. 따라서 광범위한 호환성이 필요한 경우 픽셀(px)이나 퍼센트(%)를 사용하는 것이 안전합니다.
또한, 브라우저마다 기본 글꼴 크기가 다를 수 있으므로 em이나 rem 단위를 사용할 때는 이 점을 고려해야 합니다. 일반적으로 대부분의 브라우저에서 기본 글꼴 크기는 16px입니다.