CSS 키워드로 글꼴 크기 설정하기: absolute-size vs relative-size

CSS의 font-size 속성은 픽셀(px)이나 em 같은 수치 단위 외에도 키워드를 사용해 글꼴 크기를 간편하게 지정할 수 있습니다. 이러한 키워드는 절대 크기(absolute-size) 키워드와 상대 크기(relative-size) 키워드 두 가지로 나뉩니다.

절대 크기(absolute-size) 키워드

브라우저가 미리 정해 둔 고정된 크기 단계에 따라 글꼴 크기를 지정하며, 다음 키워드들이 포함됩니다.

xx-small
x-small
small
medium (기본값)
large
x-large
xx-large
xxx-large

상대 크기(relative-size) 키워드

부모 요소의 글꼴 크기를 기준으로 한 단계씩 크거나 작게 조정하는 키워드입니다.

larger : 부모 요소보다 한 단계 큰 크기
smaller : 부모 요소보다 한 단계 작은 크기

예제 1: 절대 크기 키워드로 글꼴 크기 설정하기

아래 예제는 CSS Grid 레이아웃 안에서 xx-large, small, medium, x-large 등 절대 크기 키워드를 사용해 각 항목의 글꼴 크기를 서로 다르게 지정한 모습입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   grid-area: newArea;
   font-size: xx-large;
}
.item3 {
   font-size: small;
}
.item4 {
   font-size: medium;
}
.item5 {
   font-size: x-large;
}
.grid-container {
   display: grid;
   grid-template-areas:
   'newArea newArea . . .'
   'newArea newArea . . .';
   grid-gap: 5px;
   background-color: blue;
   padding: 5px;
}
.grid-container > div {
   background-color: orange;
   text-align: center;
   padding: 5px 0;
}
</style>
</head>
<body>
<h1>제목 1</h1>
<p>임의의 숫자 표시</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

출력 결과

CSS 키워드로 글꼴 크기 설정하기: absolute-size vs relative-size

예제 2: 상대 크기 키워드로 글꼴 크기 설정하기

이번에는 smaller와 larger 키워드를 사용해 부모 요소의 글꼴 크기를 기준으로 상대적으로 크기를 조정하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
   grid-area: newArea;
   font-size: smaller;
}
.item3 {
   font-size: smaller;
}
.item4 {
   font-size: larger;
}
.item5 {
   font-size: larger;
}
.grid-container {
   display: grid;
   grid-template-areas:
   'newArea newArea . . .'
   'newArea newArea . . .';
   grid-gap: 5px;
   background-color: blue;
   padding: 5px;
}
.grid-container > div {
   background-color: orange;
   text-align: center;
   padding: 5px 0;
}
</style>
</head>
<body>
<h1>제목 1</h1>
<p>임의의 숫자 표시</p>
<div class="grid-container">
<div class="demo">250</div>
<div class="item2">120</div>
<div class="item3">333</div>
<div class="item4">298</div>
<div class="item5">645</div>
<div class="item6">543</div>
<div class="item7">555</div>
</div>
</body>
</html>

출력 결과

CSS 키워드로 글꼴 크기 설정하기: absolute-size vs relative-size

이처럼 키워드를 활용하면 복잡한 계산 없이도 일관된 글꼴 크기 체계를 쉽게 구성할 수 있습니다. 다만 더 세밀한 조정이 필요하다면 px, rem, em 같은 수치 단위를 함께 활용하는 것이 좋습니다.