확장 가능한(scalable) 텍스트 크기를 만들려면 CSS에서 글꼴 크기(font-size)를 em 단위로 지정할 수 있습니다. 기본적으로 1em은 16px 또는 12pt에 해당하며, 그 값은 부모 요소의 글꼴 크기를 기준으로 상대적으로 계산됩니다.
CSS font-size 속성 문법
CSS font-size 속성의 기본 문법은 다음과 같습니다.
Selector {
font-size: /*값*/
}예제 1: div와 span 요소에 em 단위 적용하기
다음 예제는 CSS font-size 속성을 em 단위로 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 40%;
border: 2px solid yellow;
padding: 20px;
font-size: 1em;
}
span {
font-size: 2em;
background-color: chartreuse;
}
</style>
</head>
<body>
<div>
<p>데모 문단입니다.<span> CSS에서 em으로 설정된</span> 글꼴 크기를 보여줍니다.</p>
</div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: 테이블에 em 단위 적용하기
아래 예제는 테이블과 span 요소에 서로 다른 em 값을 적용하여 상대적인 글꼴 크기를 확인하는 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 40%;
border: 2px ridge red;
font-size: 0.8em;
}
span {
font-size: 1.5em;
background-color: silver;
}
</style>
</head>
<body>
<h2>클래스 정보</h2>
<table>
<tr>
<th>학생 수</th>
</tr>
<tr>
<td>A반</td>
<td><span>50명</span></td>
</tr>
<tr>
<td>B반</td>
<td><span>40명</span></td>
</tr>
</table>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
