CSS에서 글꼴 크기를 설정할 때는 em 단위와 font-size 속성을 함께 사용할 수 있습니다. em은 상대적인 길이 단위로, 부모 요소의 글꼴 크기를 기준으로 크기가 결정됩니다.
em 단위의 기본값
대부분의 브라우저에서 기본 글꼴 크기는 16px이므로, 다음과 같은 환산 관계가 성립합니다.
1em = 16px
예제
아래 코드를 실행하면 em 단위를 사용해 글꼴 크기를 설정하는 방법을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
/* 30px ÷ 16 = 1.875em */
font-size: 1.875em;
}
</style>
</head>
<body>
<h1>데모 제목입니다</h1>
<p>데모 텍스트입니다.</p>
</body>
</html>픽셀(px)을 em으로 변환하는 방법
원하는 픽셀 값을 em으로 변환하려면 해당 픽셀 값을 16으로 나누면 됩니다. 예를 들어 제목(h1)을 30px로 설정하고 싶다면 다음과 같이 계산합니다.
30px ÷ 16 = 1.875em
em 단위 사용 시 장점
- 접근성 향상: 사용자가 브라우저 설정에서 기본 글꼴 크기를 변경하면 em 단위로 지정된 텍스트도 함께 조절됩니다.
- 반응형 디자인에 유리: 상대 단위이기 때문에 다양한 화면 크기와 기기에서 유연하게 대응할 수 있습니다.
- 유지보수 편의성: 부모 요소의 글꼴 크기만 변경하면 하위 요소들이 비율에 맞춰 자동으로 조정됩니다.