[CSS] px, rem, em 간단 정리

<px>

- 절대값으로 사용 됨

- 뷰포트 크기 상관 x

- 고정된 값으로 렌더링 된다.

​

<rem>

- 루트 엘리먼트의 폰트 사이즈를 기준으로 적용된다.

- 크기가 변하는 곳(ex. media query)에 사용하면 편리

​

<em>

- 상위 엘리먼트의 폰트 크기를 기준으로 적용된다.

​

ex)

.main {

font-size: 2.5rem;

height: 3em;

}

- height는 2.5rem의 3배가 된다.