지금까지 프로젝트를 진행하면서 font-size를 관리할 때 모두 px단위로 관리하고 있었는데 px은 반응형 폰트를 구현할 때, 구현이 번거로워 이번 기회에 rem으로 관리해 보는 경험을 해보려 합니다.
font-size를 동적으로 컨트롤 할 수 있는 방법 중 대표적으로 em, rem이 있으며 아래와 같은 효과를 가집니다
em
em은 요소 자체, 혹은 부모 요소의 글꼴 크기에 상대적인 크기를 가집니다.
<style>
p {
font-size: 16px;
}
span {
font-size: 2em;
}
</style>
<p>
<span>em태그</span> 입니다.
</p>예를 들어 위와 같은 상황일 경우, span의 부모인 p의 font-size가 16px이기에 span의 font-size는 32px을 가집니다
rem
rem (root-em)은 em과 달리 이름 처럼 root즉 최상위 요소의 글꼴 크기에 상대적인 크기를 가집니다.
기본적으로 브라우저의 루트 글꼴 크기는 16px로 지정되어 있습니다.
<style>
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
</style>
<h1>구글</h1>
<p>안녕하세요 미래 구글 CEO, kkang입니다.<p>위와 같은 마크업을 구성할 경우, 브라우저의 기본 글꼴 크기는 16px이기에, h1은 48px, p는 16px의 font-size를 가지게 됩니다.
반응형 구현
이처럼 rem의 경우, 문서 전체에 영향을 줄 수 있기에 rem을 활용하면 문서 전체에 일괄적으로 font-size에 대한 반응형을 구현하기 적절합니다.
<style>
h1 {
font-size: 48px;
}
p {
font-size: 16px;
}
@media (min-width: 1200px) {
h1 {
font-size: 60px;
}
p {
font-size: 20px;
}
}
</style>만약 px로 반응형을 구현하려 한다면, 위와 같이 태그마다 지정해 주어야 하며, 굉장히 번거롭습니다.
<style>
h1 {
font-size: 3rem;
}
p {
font-size: 1rem;
}
@media (min-width: 1200px) {
html {
font-size: 20px;
}
}
</style>위와 같이 rem을 이용하면 문서 전체에 일괄적으로 적용할 수 있기에, 유지보수에도 더 유리합니다.
이처럼 rem을 이용하면 보다 간단하게 반응형 font-size를 구현할 수 있으며, px과 적절히 혼합하여 사용하면 보다 더 편리하게 구성할 수 있을 것 같습니다.
