CSS에서 상대 길이 단위(Relative Length Units)는 다른 길이 속성을 기준으로 삼아 길이를 지정하는 방식입니다. 절대 단위(px, pt 등)와 달리 화면 크기나 부모 요소, 폰트 크기에 따라 유연하게 조절되기 때문에 반응형 웹 디자인에서 필수적으로 사용됩니다.
CSS 상대 길이 단위 종류
주요 상대 길이 단위와 각각의 기준값은 아래 표와 같습니다.
| 번호 | 단위 및 설명 |
|---|---|
| 1 | em 해당 요소 자체의 font-size를 기준으로 합니다. 예를 들어 4em은 현재 폰트 크기의 4배를 의미합니다. |
| 2 | ex 현재 폰트의 x-height, 즉 소문자 'x'의 높이를 기준으로 합니다. |
| 3 | ch 숫자 '0'의 너비를 기준으로 합니다. |
| 4 | rem 루트 요소(html)의 font-size를 기준으로 합니다. 요소 중첩과 무관하게 일관된 크기를 유지할 수 있어 실무에서 널리 사용됩니다. |
| 5 | vw 뷰포트(viewport) 너비의 1%를 기준으로 합니다. |
| 6 | vh 뷰포트 높이의 1%를 기준으로 합니다. |
| 7 | vmin 뷰포트의 작은 쪽 치수(너비 또는 높이 중 더 짧은 값)의 1%를 기준으로 합니다. |
| 8 | vmax 뷰포트의 큰 쪽 치수(너비 또는 높이 중 더 긴 값)의 1%를 기준으로 합니다. |
| 9 | % 부모 요소의 해당 속성 값을 기준으로 합니다. |
예제 1: em 단위 활용하기
다음은 상대 길이 단위 중 em을 사용한 예제입니다.
<!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>출력 결과
font-size: 1.4em;이 적용된 문단은 기본 폰트 크기의 1.4배로 표시되어, 주변 텍스트보다 눈에 띄게 강조됩니다.
예제 2: ch 단위 활용하기
이번에는 ch 단위를 사용한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
.demo {
text-decoration: overline underline;
text-decoration-color: blue;
font-size: 4ch;
}
</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>출력 결과
font-size: 4ch;는 숫자 '0' 너비의 4배에 해당하는 크기로 폰트를 지정하며, 모노스페이스 폰트에서 특히 유용하게 활용됩니다.
마무리
상대 길이 단위를 적절히 활용하면 다양한 화면 크기와 사용자 환경에 대응하는 유연한 레이아웃을 만들 수 있습니다. 폰트 크기에는 rem, 화면 비율 기반 레이아웃에는 vw/vh를 사용하는 것이 일반적인 모범 사례이니 참고하시기 바랍니다.