1. 절대 길이 단위 px

px는 어떤 상황에서도 동일한 값을 유지하므로, 가변성이 없다. → 반응형으로썬 not good

2. em과 rem

em과 rem은 박스에서 텍스트 크기를 조정할 때 사용하는 상대 단위이다.

em과 rem은 주변 상황에 따라 그 크기를 달리 할 수 있는 가변성을 지니고 있지만, 브라우저나 기기 화면에 크기에 따라 크기가 달라지는 단위는 아니다.

em은 부모 요소의 글꼴 크기 rem은 루트 요소의 글꼴 크기(루트 요소 글자 크기 기본값은 16px)

em으로 내,외부 여백 크기를 정할 때는 자기 자신의 글자 크기를 기준으로 한다.

em은 부모 기반 사이즈 기준이다.

rem은 html 태그에 사이즈 기준 기본 16px

padding과 margin의 em은 부모를 바라보지 않고 자기 자신의 폰트 사이즈에 기준이 된다.

반응하는 단위들

font-size : 1vm; // 뷰포트 너비의 100분의 1
font-size : 1vh; // 뷰포트 높이 100분의 1
font-size : 1vmin; // 뷰포트 높이와 너비 중 작은 쪽의 100분의 1
font-size : 1vmax; // 뷰포트 높이와 너비 중 큰 쪽의 100분의 1