[CSS] 단위 값 em / rem , css 함수 calc();

em 단위

• 알파벳 M을 기준으로 만들어진 단위
• 부모의 폰트 사이즈를 기준으로 값 설정
• 브라우저의 기본 폰트 사이즈: 16px

rem 단위

• root, 즉 최상위 요소(html)의 font-size 기준 em
• 브라우저의 기본 폰트 사이즈: 16px

vw / vh 단위

• 뷰포트의 가로(vw) 세로(vh) 값을 기준으로 사용하는 상대 단위 값
• 100분의 1 단위
• 상대 단위인 %는 부모를 기준으로 값을 정하지만, vw vh는 부모와 상관 없이 뷰포트를 기준으로 값을 정한다.
• 스크롤을 인식하지 못해서 스크롤 너비만큼 레이아웃 밀림.
• %는 부모를 기준으로 하기 때문에 부모 요소를 넘지 못하지만 vw, vh는 부모요소를 넘음.

---

calc();

• css 함수로 다른 단위값들끼리 연산이 가능하다 (+, -, *, /)
• 연산자 사이에는 반드시 띄어쓰기 필요.