👀 절대 단위와 상대 단위
절대 단위: px, pt 등
상대 단위: %, em, rem, ch, vw, vh 등
✔ 글꼴 사이즈
rem : 일반적으로, 상대단위인 rem을 사용하는 것이 좋다. root의 글자 크기(브라우저의 기본 글자 크기)가 1rem 이며, 사용자가 설정한 기본 글꼴 크기를 따르기때문에 접근성에 유리하다.
em : 부모 요소에따라 상대적으로 크기가 변경되므로 계산이 어렵다.
px : 사용자의 환경에 따라 일반 텍스트보다 작게 보일 수 있으며 모바일 기기처럼 작은 화면이면서 고해상도인 경우에 적합하지 않으며, 인쇄와 같이 화면의 사이즈가 정해진 경우에 유리하다.
✔ 화면 사이즈
px : 반응형 웹에서 기준점을 만들 때 사용한다.
반응형 웹은 디바이스의 너비(width)에 따라 유동적인 레이아웃이 적용되는 웹사이트를 의미한다. 따라서 어떤 디바이스의 크기별로 css를 적용해야 하며 이때, 디바이스 크기를 나누는 기준을 px로 정한다.
vw, vh : 화면의 너비나 높이에 따른 상대적인 크기가 중요한 경우에는 vw(viewport width), vh(viewport height)를 사용한다.
1vw 는 보이는 영역 너비의 1/100, 1vh는 보이는 영역 높이의 1/100을 뜻하며 화면을 가득채우며 딱 떨어지게 스크롤 되는 사이트의 경우 100vw, 100vh를 사용해 구현한 것이다.
% = 부모 요소에 상대해서 %이기때문에 vw, vh사용하는 것이 좋다.
Reference: 코드스테이츠
