CSS의 font-size 속성은 절대 키워드와 상대 키워드를 사용해 설정할 수 있습니다. 이를 활용하면 별도의 수치 계산 없이도 원하는 크기에 맞춰 텍스트를 손쉽게 확대하거나 축소할 수 있습니다.
문법(Syntax)
CSS font-size 속성의 기본 문법은 다음과 같습니다.
Selector {
font-size: /*value*/
}
아래 표는 CSS에서 사용되는 표준 키워드를 정리한 것입니다.
| 번호 | 값 및 설명 |
|---|---|
| 1 | medium 중간 크기의 글꼴로 설정합니다. 기본값(default)입니다. |
| 2 | xx-small 가장 작은 크기의 글꼴로 설정합니다. |
| 3 | x-small 더 작은 크기의 글꼴로 설정합니다. |
| 4 | small 작은 크기의 글꼴로 설정합니다. |
| 5 | large 큰 크기의 글꼴로 설정합니다. |
| 6 | x-large 더 큰 크기의 글꼴로 설정합니다. |
| 7 | xx-large 가장 큰 크기의 글꼴로 설정합니다. |
| 8 | smaller 부모 요소보다 작은 크기로 설정합니다. |
| 9 | larger 부모 요소보다 큰 크기로 설정합니다. |
다음 예제들을 통해 CSS font-size 속성을 키워드로 설정하는 방법을 살펴보겠습니다.
예제 1
<!DOCTYPE html>
<html>
<head>
<style>
h1{
font-size: larger;
}
#demo {
font-size: medium;
text-align: center;
background-color: floralwhite;
}
p {
font-size: xx-large;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p id="demo">This is demo text.</p>
<p>This is another demo text.</p>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: auto;
padding: 5px;
width: 30%;
border: 1px solid;
border-radius: 29%;
text-align: center;
font-size: xx-small;
}
p {
font-size: xx-large;
}
</style>
</head>
<body>
<div>
<div>One</div>
<p>Two</p>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
