[css]em과 rem 차이

two-threeMin·2022년 5월 2일
0

작성 계기

em, rem은 글꼴 크기의 상대적 이라는데
무엇을 기준으로 상대적인지 알아보기 위해 jsbin 사이트에서 직접 실습해본 것을 잊지 않고자 작성했습니다.
요약하자면,

em은 cascading 된 font-size의 값 기준으로 상대적 크기를 정한다.
rem은 root, 최상위 요소(html)의 font-size를 기준으로 상대적 크기를 정한다.

예제로 보는 em

px를 명시해주지 않았을 때

(default px) : (16px)
padding : 2em

//result
padding : 32px

px를 명시하지 않았을 때 기본 값은 16px이라는 것을 알 수 있다. 16(px)*2(em)=32(px)

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 : 어떤 스타일을 적용 할지에 대한 우선순위를 정하는 것

예제로 보는 rem

(parent2) font-size: 10px
padding : 3rem

//result
padding : 48px

부모 태그가 10px임에도 padding 값은 48px이다. 즉, 부모 태그의 font-size에 영향을 받지 않는다.
어떤 기준으로 크기를 정하는지는 아래에서 확인해볼 수 있다.

html: 10px
padding : 3rem

//result
padding : 30px

최상위 요소(html)에 font-size10px로 명시하자 padding 값이 30px로 바뀌었다.

rem은 root, 최상위 요소(html)의 font-size를 기준으로 상대적 크기를 정한다.

0개의 댓글