em, rem은 글꼴 크기의 상대적
이라는데
무엇을 기준으로 상대적인지 알아보기 위해 jsbin 사이트에서 직접 실습해본 것을 잊지 않고자 작성했습니다.
요약하자면,
em은 cascading 된 font-size의 값 기준으로 상대적 크기를 정한다.
rem은 root, 최상위 요소(html)의 font-size를 기준으로 상대적 크기를 정한다.
(default px) : (16px)
padding : 2em
//result
padding : 32px
px를 명시하지 않았을 때 기본 값은 16px
이라는 것을 알 수 있다. 16(px)*2(em)=32(px)
font-size: 10px
padding : 2em
//result
padding : 20px
div
태그에 font-size
10px 값을 주면, 10(px)*2(em)
이 되어 padding은 20px
이 된다.
(parent) font-size: 15px
padding : 2em
//result
padding : 30px
부모 태그(class: parent)에 15px
을 기준으로 15(px)*2(em)
이 되어 padding은 30px
이 된다.
em은 cascading 된 font-size의 값 기준으로 상대적 크기를 정한다.
* Cascading : 어떤 스타일을 적용 할지에 대한 우선순위를 정하는 것
(parent2) font-size: 10px
padding : 3rem
//result
padding : 48px
부모 태그가 10px
임에도 padding 값은 48px
이다. 즉, 부모 태그의 font-size
에 영향을 받지 않는다.
어떤 기준으로 크기를 정하는지는 아래에서 확인해볼 수 있다.
html: 10px
padding : 3rem
//result
padding : 30px
최상위 요소(html)에 font-size
를 10px
로 명시하자 padding 값이 30px
로 바뀌었다.
rem은 root, 최상위 요소(html)의 font-size를 기준으로 상대적 크기를 정한다.