em, rem 개념 정리하기

안녕하세요.

오늘은 rem과 em에 대해서 간단하게 알아보도록 하겠습니다.

em이란?

• 길이가 유연한 가변 단위. 
• media query와 함께 사용하면, 뷰포트의 크기에 따라 길이를 가변적으로 핸들링 할 수 있습니다.
• 상위 엘리먼트의 폰트 사이즈를 기준으로 적용되는 방식 (정확히는, 실제 사용된 요소의 폰트 크기와 직접 연관 된다고 합니다.)
  - 자세한 내용

rem이란?

• 길이가 유연한 가변 단위.
• media query와 함께 사용하면, 뷰포트의 크기에 따라 길이를 가변적으로 핸들링 할 수 있습니다.
• 최상위 엘리먼트(html)의 폰트 사이즈를 기준으로 적용되는 방식

px로 사이즈를 지정할 경우?

• 절대값으로 사용되는 단위. 뷰포트의 크기에 상관없이 고정된 값으로 렌더링 됩니다.

rem을 사용하는 경우

• 요소에 크기가 절대 변하면 안되는 상황일때 빼고 모두.
• 즉, 크기가 변해야하는 곳이라면 모두 rem을 사용하는 것이 좋습니다.

rem을 잘 사용하는 방법

• rem과 media query를 사용하면 편리합니다.
• 일정한 비율로 크기가 변해야하는 디자인을 구성할때 사용하면 좋습니다.
•  다중 칼럼 레이아웃의 너비에는 em 혹은 rem 보다는 %를 사용하는 것이 좋습니다.

참조

• http://indivdot.github.io/css/2016/03/26/emrem.html
• https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984
• https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573