언제 어디서 css unit을 쓸까? re? rem?

부모요소에 따라 변경이 되어야 할때 : %, em

부모상관없이 브라우저 사이즈에 반응해야할때 : v*, rem

요소의 너비와 높이에 따라 변경할때는 %, v*

font사이즈에 따라 변경해야할때는 : em, rem 사용

em vs rem ?

둘중에 나은것은 없고 디자인에 따라 원하는 기능에 따라서 바뀜.

예제)
좋아요 버튼의 컴포넌트를 만들때 rem을 써서 만들게 된다면 root에 따라 결정되므로
다른 컴포넌트안에서 쓸때, 브라우저에서 쓸때 크기가 변동이 없다.
rem은 부모컨테이너의 폰트사이즈와 상관없이 크기가 일정하게 고정이 되기때문.
em을 이용한다면 ? 상위에서 쓸때 , 부모가 있는 곳에서 사용할때 크기가 달라진다.
em은 부모요소에서 상대적으로 변하기 때문,
header컴포넌트 안에서 사용할때 좋아요 버튼의 크기가 달라지는것!

페이지 어디에서 사용되어도 사이즈가 그대로 고정되어야할때는 rem을 쓴다!
어디에서 사용되는지 사이즈가 유동적으로 변경되어야할때는 em을 쓰는것이 좋다.

브라우저에서는 16px

em은 부모의 font-size에서 곱해간다.

em을 많이 사용하게 되면 복잡한 구조에서 폰트사이즈를 즉시 계산하기가 어렵다.
직관적으로 계산이 되기 어렵기 때문에 em을 많이 사용하면 어려워짐.

rem

부모요소 16px에서 rem은 어떤 레벨과 상관없이 계산이 된다.
보통 rem을 선호해서 쓰는편

padding에도 1em; 이런 식으로 폰트사이즈가 변경이 되도

패딩이 변경이 된다.

rem 브라우저의 사이즈가 줄어들면 폰트사이즈도 줄어드는것으로

만들때 컨테이너는 %를 쓰는게 좋다.
컴포넌트에서는 rem을 쓴다. (고정적인값을 유지할때)

box자체를 사이즈를 결정할때는 % 나 v* flexbox등을 이용해서 유동적으로 만드는것이 좋다.
요소의 font-size는 root를 상대할때는 : rem / 부모를 상대할때는 : em을 쓰는것이 좋다.