HTML 반응형웹 폰트 단위 (em, rem)

반응형 웹에서는 px(고정된 크기)를 사용하는 것은 좋지 않습니다.

큰 화면에서나 작은화면에서나 고정된 크기를 보여주는 px단위 대신 em이나 rem을 사용합니다.

em이란?

부모 요소의 글꼴을 기준으로 글자 크기의 영향을 받습니다. (바로 한단계위인 요소)

부모 요소의 글꼴크기가 기본이면 대문자 M의 너비를 1em으로 지정한 것으로 1em = 16px입니다.

부모 요소 폰트 사이즈가 20px일 경우 2em = 40px이 됩니다.

부모 요소의 글자크기에 따라 em 수치가 달라지는 것이 단점이라고하면 단점입니다.

rem이란?

em의 단점 부분을 보안하기위해 만들어진 단위이며 rem에 r은 루트를 뜻하고 부모요소의 폰트크기와 상관없이 루트요소의 폰트크기에만 영향을 받습니다.