'px' vs. 'em' vs. 'rem' vs. '%' - 반응형 디자인을 위한 단위 비교

보통 처음 CSS 스타일을 적용할 때는 가장 기본이라고 할 수 있는 픽셀 단위를 많이 사용하지만,
막상 웹페이지를 다 만들고 나서 결과물을 확인해보면 예상과는 다르게 보이는 경우가 많다.

정적 단위인 `px`은 어떠한 경우에도 값이 고정으로 설정된다.
그렇게 되면 장치 디스플레이 크기에 따라서 보여지는 디자인이 달라지게 되고,
사용자 포커스가 제한되기 때문에 브라우저 내에서 제공하는 사용자 기능 (글꼴 크기 설정 옵션 등등) 을 사용할 수 없게 된다.

말 그대로 처음 설정으로 크기가 고정되기 때문!

따라서 효율적인 반응형 디자인을 위해서는 동적 단위를 사용해주는 게 좋은데,
기왕 쓰는 거 제대로 알고 쓰도록 하자!

---

%

부모 요소 크기에 대한 상대적인 크기로써 적용되는 단위.
부모 요소의 속성 값을 참조하여 값을 계산한다.

부모 요소 속성에 영향을 받을 수밖에 없는 종속적 성질 때문에
`%` 단위로 크기를 관리하다보면 계층이 내려갈수록 구조가 복잡해질 수 있다.

 

em

요소 자체의 폰트 크기 속성을 참조하여 크기를 계산하는 단위.
만약 현재 element에 `font-size: 24px;`이 적용되어 있고, 여기에 `padding: 0.1em;`을 추가하였다면
`0.1em = 2.4px` 정도로 계산된다.

❗ 참고사항 ❗
`em` 단위로 폰트 크기를 설정하면 direct parent element의 속성 값을 참조하여 크기를 적용하기 때문에
`%`를 쓴 것과 동일한 값이 적용된다! ex) `1em = 100%`
이 경우 다른 속성 값에 종속적이기 때문에 `%`와 마찬가지로 계층적 구조가 쌓이다보면 관리가 어려울 수 있다.

 

rem

최상위 요소(root)의 폰트 크기 속성와 연관되어 적용되는 단위.
`em`과 비슷하게 동작하지만 참조하는 요소가 다르다는 차이가 있다.

모든 요소들이 같은 기준을 참조하기 때문에 크기 계산이 쉽고,
다른 단위에 비해 상대적으로 관리가 쉬워 대개 사용이 권장됨!