CSS에서 절대 길이 단위(Absolute Length Units)는 서로 간에 고정된 비율 관계를 유지하는 단위입니다. 화면 크기나 기기와 무관하게 항상 동일한 물리적 크기를 나타내기 때문에, 출력 형식(예: 인쇄물)이 미리 정해져 있는 경우에 주로 사용됩니다.
CSS 절대 길이 단위 종류
| 번호 | 단위 및 설명 |
|---|---|
| 1 | cm 센티미터(centimeters) |
| 2 | mm 밀리미터(millimeters) |
| 3 | in 인치(inches) — 1in = 96px = 2.54cm |
| 4 | px 픽셀(pixels) — 1px = 1인치의 1/96 |
| 5 | pt 포인트(points) — 1pt = 1인치의 1/72 |
| 6 | pc 파이카(picas) — 1pc = 12pt |
절대 길이 단위 사용 예제 1
아래 예제는 in(인치) 단위를 사용해 글꼴 크기를 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 0.3in;
}
</style>
</head>
<body>
<h1>Details</h1>
<p class="demo">Examination Center near ABC College.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>실행 결과
절대 길이 단위 사용 예제 2
다음 예제는 cm(센티미터)과 mm(밀리미터) 단위를 활용해 서로 다른 요소의 글꼴 크기를 지정합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
font-size: 1cm;
}
.demo2 {
font-size: 5mm;
}
</style>
</head>
<body>
<h1>ICC Rankings</h1>
<p class="demo">ICC Test Rankings released 29th November.</p>
<p class="demo2">ICC ODI Rankings released 30th November.</p>
</body>
</html>실행 결과
절대 길이 단위 활용 시 참고 사항
절대 길이 단위는 물리적 크기가 고정되어 있어 인쇄 스타일시트(print stylesheet) 작성 시 유용하지만, 화면 해상도가 제각각인 웹 환경에서는 반응형 디자인을 위해 em, rem, % 같은 상대 길이 단위를 함께 고려하는 것이 좋습니다. 특히 px는 화면 표시용으로 가장 널리 쓰이며, pt와 pc는 전통적으로 문서 및 인쇄 분야에서 많이 사용됩니다.