px 픽셀
- 이미지를 확대했을 때, 보이는 사각형
- 어떤 CSS 단위를 사용하던지, 최종적으로 브라우저는 px로 계산한다.
- images, screens, borders에 사용
px 이미지
- 600px 은 항상 600px 이다. 모바일 기기에서는 의도한 디자인을 왜곡할수 있다.
- 크기 변경에 따라 이미지 품질이 달라진다.
- %를 사용해 max-width를 설정해 일부 화면에서 유동적으로 변경할수 있다.
- 가능한 모든 화면에 이미지를 사용할 경우, 여러 이미지를 사용해야 한다.
px border
- 1px 이하의 border 를 가질수 없기 때문에 px을 사용해야 한다.
em
- 컨테이너의 상대적인 값 사용
- 부모 엘레먼트의 크기를 알아야 한다.
- 최종 사이즈를 정확히 알수 없다.
- line-height int, float 이 필요하므로 em을 사용하지 않는다.
- em 사용을 지양한다.
rem 👏🏻
- 기본 폰트 16px = 1rem
- 10px 단위를 사용하기 위해서, 62.5% 설정
- root의 상대적인 값 사용
- Bootstrap 3 에서 Bootstrap 4 로 변경시, em에서 rem으로 변경
- margin, padding, font-size, width/height에 사용
vw || vh
- 스크린 관련 설정이 필요한 경우 사용
px과 rem의 차이를 찾아보면서, 62.5% 설정과 root 값에 따라 변경되는 rem의 특징이 보다 전문적으로 느껴졌고, 실제 프론트 개발시 rem을 자주 사용하는지 궁금했다.
결과적으로, 현실적인 문제로 px를 많이 사용하고 점차적으로 rem 사용을 지향하지만 디자인부터 rem을 사용해야 의미가 있다고 한다.
https://medium.com/@MartinBing/cold-feet-with-css-units-a450c87c99f0
be_zion