CSS에서는 백분율(%)과 em 단위를 조합하여 요소의 font-size를 지정할 수 있습니다. 이 방식을 활용하면 브라우저마다 다르게 표시될 수 있는 글자 크기를 일관성 있게 유지할 수 있어, 서로 다른 브라우저 환경에서도 균일한 텍스트 크기를 구현하는 데 매우 유용합니다.
기본 문법
CSS의 font-size 속성은 다음과 같은 형식으로 작성합니다.
Selector {
font-size: /*값*/
}예제 1: body에 백분율, p와 span에 em 적용하기
아래 예제는 body 요소에는 백분율을, p와 span 요소에는 em 단위를 사용해 font-size를 설정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 80%;
}
p {
font-size: 2em;
}
span {
font-size: 4em;
font-style: italic;
}
</style>
</head>
<body>
<p>Reading <span>source code</span> written by others gives you opportunity to criticize the
mistakes done in writing that code</p>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
예제 2: div에 백분율, p에 em 적용하기
다음 예제는 div 요소에는 백분율을, 그 안의 p 요소에는 em 단위를 적용하여 상대적인 폰트 크기가 어떻게 계산되는지 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
font-size: 120%;
}
p {
font-size: 2em;
}
</style>
</head>
<body>
<h3>Demo Heading</h3>
This is example text.
<div>
Examples are easier to understand with practical implementation
<p>This is another text just to display different ways to set font size in CSS.</p>
</div>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
정리
백분율은 부모 요소의 폰트 크기를 기준으로 배율을 정하고, em은 해당 요소에 적용된 폰트 크기를 기준으로 배수를 계산합니다. 두 단위를 적절히 조합하면 반응형 웹에서 확장성 있고 일관된 타이포그래피를 손쉽게 구현할 수 있습니다.