[css] em과 rem

Font-size

폰트 단위의 종류

폰트의 단위는 절대 단위와 상대 단위로 나눌 수 있다. 절대단위로는 pt(포인트), in(인치), mm, cm, pc(파이카, 1pc=12pt), px 등이 있고 상대단위로는 %(퍼센트), em, rem 등이 있다.

이 중 가장 많이 사용되는 단위는 px과 em, rem이다.

px

px은 픽셀(화소)단위이다. 1px은 화소 1개 크기를 의미한다. 절대값으로 가장 많이 사용되는 단위이다.

절대단위인 px을 썼을 때 발생할 수 있는 문제점

px이 절대값이기 때문에 컨테이너 사이즈가 변경되어도 컨텐츠가 전혀 바뀌지 않는다. 즉, 반응형 웹사이트 제작에 적절하지 않다!

em

em은 부모 요소를 기준으로 배수 값으로 계산되는 상대 단위이다. HTML이나 body에 우리가 따로 폰트 사이즈를 지정하지 않는다면 기본적으로 16px로 설정된다. 예를 들어 부모 요소의 폰트 크기를 8em, 자식 요소의 폰트 크기를 0.5em으로 지정한다면 실제 폰트 사이즈는 부모 요소는 16px*8=128px, 자식 요소는 128px*0.5=64px이 된다.

rem

rem(root+em)은 최상위 요소인 html의 사이즈를 기준으로 계산되는 상대 단위이다. em의 예시와 동일하게 예를 들어보면(부모 요소의 폰트 크기 8em, 자식 요소의 폰트 크기 0.5em), 부모 요소의 실제 폰트 사이즈는 16px*8=128px, 자식 요소는 16px*0.5=8px이 된다. 기준이 최상위 요소이기 때문에 em과 달리 16px이 기준인 것을 확인 할 수 있다.

참고1 참고2