[CSS] em과 rem의 공통점, 차이점

https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984 해당 글을 대부분 참고하여 간단하게 정리한 내용입니다. 더 자세한 내용을 원하신다면 해당 글을 참고해주세요.

§ html 태그의 font-size css 값에 따라 달라지는 px과 rem 그리고 em 유닛을 확인할 수 있는 예시 §

em과 rem의 공통점

• 불변적인 px와는 달리 길이가 유연한 가변단위로 설정된 폰트 크기 혹은 브라우저에 의해 계산된 픽셀값으로 변환된다.
• 요소의 크기가 절대 변하면 안 되는 상황에서는 사용하지 말아야 한다.

em과 rem의 차이점

구분	em	rem
변환에 영향을 주는 값	스타일을 지정한 요소의 폰트 크기 ( 상위요소 x )	최상위(root) 요소, html 태그의 font-size 값

대부분의 경우 상속에 의한 영향 때문에 em보다 rem을 사용하는게 바람직하다.