프론트엔드 필수 반응형 CSS 단위 정리

 

• px: font 에 따라 글씨 크기가 달라진다.
• em: 선택된 폰트에 상관없이 항상 고정된 사이즈를 가진다. 부모의 폰트사이즈에 상대적으로 계산된다. 부모의 폰트 사이즈에 곱한 값. (개발자도구에서 확인 가능)

• rem: root 에 지정된 폰트사이즈에 따라 크기가 결정된다.
  • 즉, html 이나 body 에서 따로 사이즈를 지정하지 않으면 기본적으로 html font-size 가 100% 로 지정되는데, 이는 브라우저에서 지정한 폰트사이즈를 따라간다는 말. 브라우저 환경에서 폰트사이즈를 변경하면 이에 따라 웹 폰트 사이즈가 변경된다.

v: viewport related

%: parent related

 

결론

• 픽셀은 왠만하면 사용하지 말자.
• 고정값이 필요할 경우엔 rem 을 사용하자.
• vh, vw 를 사용하여 반응형 웹을 만들자.

 

참고: www.youtube.com/watch?v=7Z3t1OWOpHo (드림코딩 by 엘리)