Relative length units

절대적인 유닛에는 px을 사용하고, 상대적인 유닛에는 %, v*, em, rem 등을 주로 사용합니다.

Unit	Relative to
em	Font size of the parent, in the case of typographical properties like font-size, and font size of the element itself, in the case of other properties like width.
rem	Font size of the root element.
vw	1% of the viewport's width.
vh	1% of the viewport's height.
%	Relative to the parent element.

em: relative to parent element

em은 부모의 폰트 사이즈에 상대적으로 계산이 되어집니다.

HTML의 default 폰트 사이즈는 16px인데,

어떤 부모 글자가 8em 이면 16px * 8 = 128px ( === 800 %)

그 부모의 자식 글자가 0.5em이면 128 * 0.5 = 64px ( === 50%)

rem: relative to root element

루트에 지정된 폰트사이즈에 따라서 크기가 결정되는 아이

루트 요소에 상대적으로 크기가 결정됩니다.

 

그럼 언제 어떤것을 사용하면 될까요?

 

1. 부모요소의 사이즈에 따라서 사이즈가 변경이 되어야한다면 %, em 사용

부모와는 상관없이 브라우저 사이즈에 대해서 반응해야한다면 v*, rem 사용

 

2. 요소의 너비와 높이에 따라서 사이즈가 변경이 되어야한다면 %, v*를 사용

font사이즈에 따라서 사이즈가 변경이 되어야한다면 em, rem 사용

 

나의 컴포넌트가 페이지 어디에서 사요외어져도 사이즈가 그대로 고정이 되어야한다면 rem을 사용하고,

나의 컴포넌트가 부모 요소에 따라서 사이즈가 유동적으로 변경이 되어야한다면 em을 사용하는 것이 좋습니다.