rem은 상대적인 단위로 root em 의 약자입니다.
최상위 html 요소의 font-size속성 값에 비례하여 값을 결정합니다.
/* font-size : 16px 인 경우 */
1rem => 16 * 1 = 16px
0.8rem => 16 * 0.8 = 12.8px
3rem => 16 * 3 = 48px
폰트 뿐만 아니라 패딩, 마진, 너비, 높이 등 다양한 속성에서도 사용할 수 있습니다.
padding: 2rem /* (2* 16px ) = 32px */
반응형 디자인을 구현할때 효과적이겠죠? 다양한 화면 크기에 적절히 대응할 수 있답니다.