CSS의 상대 길이 단위는 다른 길이 속성에 상대적인 길이를 지정하는 데 사용됩니다.
| Sr.No | 단위 및 설명 |
|---|---|
| 1 | 그들 요소의 글꼴 크기에 상대적 즉 4em은 현재 글꼴 크기의 4배를 의미합니다. |
| 2 | 예 현재 글꼴의 x 높이에 상대적 |
| 3 | 채널 0의 너비를 기준으로 |
| 4 | 렘 루트 요소의 글꼴 크기에 상대적 |
| 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> 출력
예시
이제 다른 예를 살펴보겠습니다 -
<!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> 출력
