컴퓨터로 사진이나 그림을 볼 때 기본이 되는 단위입니다. 1px은 화소 1개의 크기를 말합니다. 따라서, 웹 브라우저에서 글꼴 크기를 바꿔도 크기가 그대로 유지 됩니다.
※ 화소란?
"화소"란 화상을 구성하는 최소 단위로 "점(點)"이란 뜻
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의 경우 root의 font-size를 기준으로 변하게 됩니다.
위의 예시와 같이 부모의 font-size를 8em으로 설정하고 자식의 font-size를 0.5em으로 설정 할 경우 부모의 font-size는 아래와 같고,
자식의 font-size는,
이 됩니다.
따라서, 웹 브라우저에서 글꼴 크기를 바꾸는 경우 px로 값을 설정했을 경우 font-size가 그대로지만 em의 경우 부모 요소에 따라 rem의 경우 root요소에 따라 font-size가 바뀌게 됩니다.
반응형 웹을 만들 때 px 보다 em, rem을 사용하는 이유가 됩니다.
good post!