둘중에 나은것은 없고 디자인에 따라 원하는 기능에 따라서 바뀜.
예제)
좋아요 버튼의 컴포넌트를 만들때 rem을 써서 만들게 된다면 root에 따라 결정되므로
다른 컴포넌트안에서 쓸때, 브라우저에서 쓸때 크기가 변동이 없다.
rem은 부모컨테이너의 폰트사이즈와 상관없이 크기가 일정하게 고정이 되기때문.
em을 이용한다면 ? 상위에서 쓸때 , 부모가 있는 곳에서 사용할때 크기가 달라진다.
em은 부모요소에서 상대적으로 변하기 때문,
header컴포넌트 안에서 사용할때 좋아요 버튼의 크기가 달라지는것!
페이지 어디에서 사용되어도 사이즈가 그대로 고정되어야할때는 rem을 쓴다!
어디에서 사용되는지 사이즈가 유동적으로 변경되어야할때는 em을 쓰는것이 좋다.
em을 많이 사용하게 되면 복잡한 구조에서 폰트사이즈를 즉시 계산하기가 어렵다.
직관적으로 계산이 되기 어렵기 때문에 em을 많이 사용하면 어려워짐.
부모요소 16px에서 rem은 어떤 레벨과 상관없이 계산이 된다.
보통 rem을 선호해서 쓰는편
패딩이 변경이 된다.
만들때 컨테이너는 %를 쓰는게 좋다.
컴포넌트에서는 rem을 쓴다. (고정적인값을 유지할때)
box자체를 사이즈를 결정할때는 % 나 v* flexbox등을 이용해서 유동적으로 만드는것이 좋다.
요소의 font-size는 root를 상대할때는 : rem / 부모를 상대할때는 : em을 쓰는것이 좋다.