본 글을 통해 em, rem은 대략 무엇이고 em, rem을 px 단위로는 어떻게 되는지 알 수 있습니다. 본 글은 하단의 참고 사이트를 통해 스터디하며 작성했습니다. 틀린 부분이나 의견주시면 수정하겠습니다.
보통 폰트나 박스 등의 사이즈를 지정할 때 우리는 생각한 사이즈 그대로 노출하기 위해 상대적인 길이 단위가 아닌 절대 길이 단위인 px을 자주 사용한다. 절대 길이 단위는 편리하지만 (목적에 따라) 사이즈가 제각각인 여러 디바이스에서 어떻게 보일지 생각해 볼 필요가 있다.
다양한 디바이스 및 브라우저의 스크린 사이즈에 대응하기 위해 반응형으로 작업한다면 상대적인 길이 단위로 사이즈를 지정해야 할텐데 이때 em, rem 등을 사용한다.
(상대 길이 단위로는 em, ex, rem, ch, 1h, vw, vh, vmin, vmax 등이 있다.)
em & rem
em 단위는 "상위 요소의 글꼴 크기" 를 의미하고, rem 단위는 "루트 요소의 글꼴 크기" 를 의미한다.
rem의 r은 root(최상위)를 뜻한다.
(최상위 요소에 지정된 폰트 크기가 직접 rem 값을 결정짓기도 하지만, 해당 폰트의 크기는 애초에 브라우저에서 설정한 값에서 전해질 수도 있다. 즉, 브라우저에 지정된 폰트 크기 설정값은 rem 단위의 값에 영향을 줄 수 있으며, 상속의 영향을 받는 em 단위도 마찬가지다.)
사용 및 유의사항
- em : 최상위 요소가 아닌 특정 요소의 폰트 사이즈를 기준으로 그 크기가 바뀌어야 하는 곳에 사용
- rem : 사용자가 브라우저의 기본 폰트 사이즈를 어떤 값으로 설정하든지, 사용자가 설정한 가변적인 텍스트 크기에 따라서 사이트의 레이아웃이 적용될 수 있도록 할때 사용 (즉, 폰트에서만 사용하는게 아니라 예를 들어, 그리드나 rem을 이용한 기본 폰트 사이즈 기반으로 만든 UI 스타일, 그리고 em을 이용해 특정 위치에 특별한 사이즈를 지정할 수도 있다고 한다.)
유의사항 : rem 기반으로 레이아웃 스타일을 구현하면서 html 요소의 폰트 사이즈를 px 단위로 (html 요소의 폰트 크기를 바꿔가면서 전체적으로 사용하기 위해서겠지만) 지정한다면, 사용자가 브라우저에 설정 해둔 폰트 크기를 html 요소가 무시하게 되어 글쓰기 폼과 같은 콘텐츠의 기능을 못하게 될 수도 있다고 한다.
만약 html 요소의 폰트 크기를 바꾸고 싶다면 폰트 크기를 px가 아닌 em이나 rem으로 지정해 두어 사용자가 지정한 브라우저 폰트 크기와 일정한 비율로 유지되도록 해야한다.
em, rem 단위의 픽셀(pixel, px)값은 어떻게 될까?
- em : 스타일을 준 요소(element)의 폰트 크기를 곱한 값 - rem : 페이지 최상위(root) 요소 폰트 크기를 곱한 값 (html 요소의 폰트 크기가 기준)
예를 들어 (root) html 요소의 폰트 사이즈가 15px일 때,
font-size를 1.2em로 지정한 요소는 18px(15 * 1.2)로 적용되며 하위 요소에도 1.2배로 적용된다.
반면에 rem으로 지정한 모든 요소들은 최상위 요소인 html 요소의 폰트 사이즈에 곱한 값으로 동일하게 적용된다. 아래 코드를 보면 이해하기 쉬울 것이다.
