px는 값이 고정되어있는 절대값의 단위이고, em과 rem은 환경에 따라 변하는 상대단위이다.
https://velog.io/@codns1223/CSS-px-em-rem-%EC%B0%A8%EC%9D%B4
➡️ rem
별도의 font-size를 설정하지 않았을 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받는다. (일반적으로 16px)
html {
font-size: 16px;
}
div {
font-size: 20px;
width: 10rem; /* 160px */
}
💡 넓이(width)와 높이(height) 속성의 값은?
<style>
.container {
font-size: 14px;
}
.container.title {
font-size: 2rem; // 28px
}
.container.subtitle {
font-size: 1.5rem; // 21px
}
.container.subtitle.leading {
font-size: 0.5rem; // 7px
width: 0.3rem;
height: 0.4rem;
}
</style>
<body>
<div class="container">
<div class="title"></div>
<div class="subtitle"></div>
</div>
</body>width는 14×0.3 = 4.2px
height은 14×0.4 = 5.6px
결론
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있다. 왜냐하면 em의 경우 위에서 보았듯이 실제 몇 px로 변환될지에 영향을 주는 변수가 많아지기 때문에 em을 사용해서 스타일된 요소의 경우 재사용이 어렵고 유지보수가 힘들어지는 경향이 있기 때문이다.
하지만 rem과 em도 용도에 맞게 적절히 혼용해서 사용할 수 있다. 예를 들어 어느 페이지에서든 고정된 사이즈를 사용해야 한다면 rem을, 부모 요소에 따라 유동적으로 변해야 하는 곳에는 em을 사용하면 된다. 그래서 보통 font-size에는 rem을 사용하고 padding이나 margin같이 화면에 따라 유연하게 변하는 크기는 em을 사용한다.