CSS에서 절대 단위(Absolute Units)는 화면 크기나 부모 요소, 기기 환경에 상관없이 항상 고정된 물리적 크기를 나타내는 단위입니다. 인쇄 매체나 정확한 크기 지정이 필요한 경우에 유용하게 사용됩니다.
CSS 절대 단위의 종류
| 단위 | 약어 | 설명 |
|---|---|---|
| 픽셀 (Pixels) | px | 화면을 구성하는 가장 작은 단위로, 웹에서 가장 널리 사용됩니다. |
| 포인트 (Points) | pt | 주로 인쇄 분야에서 사용되며, 1pt는 1/72인치입니다. |
| 인치 (Inches) | in | 물리적 길이 단위로, 1in은 96px에 해당합니다. |
| 센티미터 (Centimeters) | cm | 미터법 길이 단위로, 1cm은 약 37.8px입니다. |
| 파이카 (Picas) | pc | 인쇄 조판에서 사용되며, 1pc는 12pt입니다. |
절대 단위 간 환산 관계
절대 단위들은 서로 명확한 환산 관계를 가지고 있습니다. 기준이 되는 값은 다음과 같습니다.
- 1in(인치) = 2.54cm
- 1in = 96px
- 1in = 72pt
- 1pc = 12pt
- 1cm ≈ 37.8px
절대 단위 사용 시 주의사항
절대 단위는 크기가 고정되어 있기 때문에, 화면 크기가 다양한 반응형 웹 디자인에는 적합하지 않을 수 있습니다. 이런 경우에는 뷰포트나 부모 요소를 기준으로 크기가 변하는 상대 단위(em, rem, vw, vh 등)를 사용하는 것이 좋습니다.
반면, 테두리 두께나 그림자 크기처럼 기기와 무관하게 일정해야 하는 요소에는 px 단위가 여전히 널리 활용됩니다. 또한 인쇄용 스타일시트(@media print)를 작성할 때는 pt, cm, in 같은 물리적 단위가 유용합니다.