CSS 절대 단위(Absolute Units)란?
CSS에서 절대 길이 단위는 단위들 사이의 관계가 고정되어 있는 값을 의미합니다. 출력 매체(화면 크기, 용지 크기 등)가 이미 확정되어 있거나 물리적 크기가 중요한 경우에 주로 사용됩니다. 대표적인 절대 길이 단위는 다음과 같습니다.
| 번호 | 단위 및 설명 |
|---|---|
| 1 | cm 센티미터(centimeters) |
| 2 | mm 밀리미터(millimeters) |
| 3 | in 인치(inches), 1in = 96px = 2.54cm |
| 4 | px * 픽셀(pixels), 1px = 1in의 1/96 |
| 5 | pt 포인트(points), 1pt = 1in의 1/72 |
| 6 | pc 파이카(picas), 1pc = 12pt |
절대 단위 예제
절대 단위를 활용한 실제 코드 예시를 살펴보겠습니다.
<!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>실행 결과
CSS 상대 단위(Relative Units)란?
상대 길이 단위는 다른 길이 속성 값을 기준으로 크기를 지정하는 단위입니다. 반응형 웹 디자인에서 필수적으로 사용되며, 부모 요소나 뷰포트(viewport) 크기에 따라 유연하게 조절됩니다.
| 번호 | 단위 및 설명 |
|---|---|
| 1 | em 해당 요소의 font-size를 기준으로 함. 예: 4em은 현재 폰트 크기의 4배 |
| 2 | ex 현재 폰트의 x-height(소문자 x의 높이)를 기준으로 함 |
| 3 | ch 숫자 '0'의 너비를 기준으로 함 |
| 4 | rem 최상위(root) 요소의 font-size를 기준으로 함 |
| 5 | vw 뷰포트 너비의 1%를 기준으로 함 |
| 6 | vh 뷰포트 높이의 1%를 기준으로 함 |
| 7 | vmin 뷰포트의 작은 쪽 치수(너비 또는 높이)의 1%를 기준으로 함 |
| 8 | vmax 뷰포트의 큰 쪽 치수(너비 또는 높이)의 1%를 기준으로 함 |
| 9 | % 부모 요소의 해당 속성 값을 기준으로 함 |
상대 단위 예제
이번에는 상대 길이 단위를 사용한 예제를 확인해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 1.4em;
}
</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>실행 결과
절대 단위 vs 상대 단위, 어떤 것을 사용해야 할까?
일반적으로 웹 환경에서는 화면 크기가 다양한 기기마다 다르기 때문에 em, rem, %, vw, vh 같은 상대 단위를 사용하는 것이 권장됩니다. 특히 rem은 최상위 요소의 폰트 크기만 기준으로 삼기 때문에 em처럼 중첩 계산 오류가 발생하지 않아 유지보수에 유리합니다. 반면 인쇄물이나 PDF처럼 출력 형식이 고정된 경우에는 cm, mm, pt 같은 절대 단위가 적합합니다.