절대적인 속성에 사용하는 단위에는 px를 사용하고
상대적인 속성에는 %, v*(뷰포트), em, rem을 사용합니다.
단위를 사용하는 기준
첫 번째로 나누는 기준은
- 부모 요소의 사이즈에 따라서 사이즈가 변경이 돼야 한다면
-> %, em 을 사용합니다.
- 부모 요소와는 상관없이 브라우저 사이즈에 대해서 반응해야 한다면
-> v*(뷰포트), rem을 사용합니다.
두 번째로 나누는 기준은
- 요소의 너비와 높이에 따라서 사이즈가 변경되어야 한다면
-> %, v*(뷰포트) 를 사용합니다.
- font 사이즈에 따라서 사이즈가 변경되어야 한다면
-> em, rem을 사용합니다.
rem
rem을 사용해서 스타일을 적용하게 되면 root 요소 (html)의 font size에 따라서 크기가 결정되기 때문에
페이지 내에 어느곳에서 사용하여도 동일한 크기를 유지합니다.
그 이유는 부모 컨테이너에 있는 font size와는 상관없이 루트 요소의 font size 기준으로 하기 때문에 어느 박스 안에서 사용하여도 동일한 크기를 유지할 수 있습니다.
em
em을 사용해서 스타일을 적용하게 되면 페이지 내에 크기가 다르게 적용될 수 있습니다. 그 이유는 em 요소는 부묘 요소의 font size에 따라 상대적으로 변하기 때문입니다.
그래서 해당 컴포넌트가 페이지 어디에서도 동일한 크기로 적용되어야 한다면 rem 을 사용하고 반대로 해당 컴포넌트가 어디에 사용되냐에 따라서 즉 부모 요소에 따라서 사이즈가 유동적으로 변경되어야 한다면(font size에 따라 발생할 수 있는 padding, margin 등) em을 사용해서 만드는 게 좋습니다.
결론
box 자체를 사이즈를 결정할 때는 %, v*, flex를 이용하여 유동적으로 만드는 것이 좋고 요소의 font size를 결정할 때는 root를 상대로 변경되어야 한다면 rem을 부모 요소 상대로 변경되어야 한다면 em을 사용하면 됩니다.
Tip
font-size를 정할 때는 부모 요소 기준으로 계산되는 rem을 사용하는 것을 추천합니다.
추천 사이트: px to em, rem
https://codebeautify.org/rem-to-px-converter
REM to PX Converter Online
REM to PX Converter online tool is helps to convert REM value into PX value.
codebeautify.org
출처: https://www.youtube.com/watch?v=xWMKz9NCD0k