px, em, rem 어떤 것을 사용할까?

절대 길이 단위 px

px

컴퓨터로 사진이나 그림을 볼 때 기본이 되는 단위입니다. 1px은 화소 1개의 크기를 말합니다. 따라서, 웹 브라우저에서 글꼴 크기를 바꿔도 크기가 그대로 유지 됩니다.

※ 화소란?
"화소"란 화상을 구성하는 최소 단위로 "점(點)"이란 뜻

상대 길이 단위 em, rem

em

em이 상대 길이인 이유는 부모 font-size에 따라 자식 font-size가 바뀌기 때문입니다.

예를 들어, 부모의 font-size를 8em으로 설정하고 자식의 font-size를 0.5em으로 설정 할 경우 부모의 font-size는 아래와 같고,

※ 16px을 곱해주는 이유는 root(부모)의 기본 font-size가 16px이기 때문입니다. 만약, root의 font-size를 8px로 바꿀 경우 8이 곱해지게 됩니다.

자식의 font-size는,

이 됩니다.

※ em의 경우 %로 대체해서 사용할 수 있는데 8em일 경우 800%가 됩니다.

rem

rem의 경우 root의 font-size를 기준으로 변하게 됩니다.

위의 예시와 같이 부모의 font-size를 8em으로 설정하고 자식의 font-size를 0.5em으로 설정 할 경우 부모의 font-size는 아래와 같고,

자식의 font-size는,

이 됩니다.

px, rem, em 어떤 것을 사용해야 할까?

따라서, 웹 브라우저에서 글꼴 크기를 바꾸는 경우 px로 값을 설정했을 경우 font-size가 그대로지만 em의 경우 부모 요소에 따라 rem의 경우 root요소에 따라 font-size가 바뀌게 됩니다.

반응형 웹을 만들 때 px 보다 em, rem을 사용하는 이유가 됩니다.

참고

https://www.youtube.com/watch?v=xWMKz9NCD0k