[CSS 속성] 단위

px: 픽셀

하나의 점을 의미

%: 상대적 백분율

해당 요소가 가진 부모 요소에 상대적

em: 요소의 글꼴 크기

하나의 요소가 가지고 있는 기본 글꼴 크기가 1em

rem: 루트 요소(html)의 글꼴 크기

루트는 최상위 요소.
무조건 html에 지정되어 있는 글꼴 크기를
기준으로 해서 단위를 설정

vw: 뷰포트 가로 너비의 백분율

viewport width 가로를 100으로 쪽에서 1vw는 백분의 1만큼을 차지한다

vh: 뷰포트 세로 너비의 백분율

viewport height 가로를 100으로 쪽에서 1vw는 백분의 1만큼을 차지한다

브라우저는 따로 폰트 사이즈를 지정해주지 않으면 폰트 사이즈를 16px로 지정한다

<div class="parent">
  <div class="child"></div>
</div>

html {
  font-size: 16px;
}

.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
}

.child {
  width: 10em; <<
  height: 50%;
  background-color: orange;
}

10em: 16px 의 10배 = 160px

.parent {
  width: 300px;
  height: 200px;
  background-color: royalblue;
  font-size: 10px; <<
}

부모요소에 폰트사이즈를 명시해주면 자식요소에 상속되어 10em은 이제 10px x 10 = 100px이 된다
그래서 em은 관리가 힘듬

rem은 html 요소에 들어있는 폰트 크기를 기준으로 사용함. html 폰트크기만 바꿔주면 rem 을 사용한 모든 요소의 크기를 제어할 수 있기 때문에도 용이함