폰트사이즈에서 em/rem이 뭔지 궁금합니다

Question

안녕하세요!

폰트사이즈를 px, em, (오늘 처음봤지만)rem 처럼 다양하게 쓰던데 이때 em과 rem이 뭔지 잘 모르겠어요

검색해봤는데도 잘 모르겠더라구요ㅠㅠㅎㅎ

Answer

rem은 최상위 태그인 html에서 지정된 font-size 값을 배수로 변환한 크기라고 생각하시면 될 것 같습니다.

html에서 font-size가 만약 16px로 되어있다면

2rem은 html의 font-size에 따라 32px이 되는 것이고,

1.5rem은 16 * 1.5 = 24px이 되겠죠.

em도 계산 방법은 동일합니다. 하지만 특정 태그의 font-size에 따라 달라지는 것이죠.

div의 font-size를 20px이라 하고, css 내에서 div { margin: 2em; }이란 코드가 있으면 margin이 40px로 적용이 되는겁니다.