rem 과 em

EM

상속된 폰트사이즈 * em = px 로 변환됌.

.parent{
    font-size:20px;
    .child{
        font-size:14px;
        width:2em;    
    }
}
 

parent로 부터 20px를 상속받았으므로 child는 20px을 상속받음.
child의 width = 20px * 2em 이므로

40px을 width 값으로 가짐

그러나  child에 font-size가 14px로 지정이 된다면 

width = 14px * 2em = 28px을 너비 값으로 가짐.

REM(Root EM)

최상위 요소의 폰트크기 * rem 의 공식

HTML의 폰트크기가 설정되지 않았다면 브라우저 설정값이 효력을 가짐.

EM - 상위요소로 부터 상속받은 폰트크기 혹은 자신에게 설정된 폰트크기 * em

REM - 최상위요소(HTML)의 폰트크기 * rem

---

REM을 사용해야 하는 이유

사용자가 브라우저의 폰트를 변경하더라도 그에 따라서 전체적인 폰트크기가 가변적으로 변경가능하기때문.

px로 고정시킬경우 폰트변경이 불가하므로 사용자가 본인의 환경에 맞게 바꿀수가 없다. rem으로 지정하여 일정한 비율로 유지될 수 있도록 해야한다.

em은 부모로부터 상속받은 폰트크기를 적용하므로 각각 변하는 상황을 컨트롤하기 어려움.

너비, 높이, 패딩, 마진, 테두리 너비, 폰트 크기, 그림자 등등 크기가 변해야 하는 곳이면 rem 단위사용을 권장함.

media queries에도 rem 사용.