CSS 지식 - em과 rem의 차이

em과 rem의 차이점

 

구글링 결과, 아래 2개의 사이트만 봐도 100% 이해할 듯

• https://indivdot.github.io/css/2016/03/26/emrem.html

반응형 웹을 위한 rem 단위로 디자인하기

• https://www.codingfactory.net/10748

CSS / 상대적인 크기를 정하는 em 단위와 rem 단위의 차이

간단하게 문장만 가져오면,

from - https://indivdot.github.io/css/2016/03/26/emrem.html

em과 rem의 가장 큰 차이점은 기준이 무엇이냐는 것이다. em은 상위 엘리먼트의 폰트 사이즈가 기준이고, rem은 루트 엘리먼트(html)의 폰트 사이즈가 기준이 된다. 아래 예를 들었다.

즉, 만약 P를 div가 싸고 있고 그 위에 html 루트가 있다고 가정하고, 아래와 같이 css가 정의되어 있다고 치자.

 

html{font-size:10px;}

div{font-size:2em;}

p{font-size:1em;} vs p{font-size:1rem;}

 

그럼, 아래와 같이 설명할 수 있다.

• p의 em은 바로 위의 div 값을 참고해서 100% 크기니깐 20px 글자크기가 되고
• p의 rem은 루트의 html 값을 참고해서 100% 크기니깐 10px 가 된다.

끝.

 

거인국에 온건지...아기 인건지...관점에 따라..ㅋㅋ

toddler in blue hooded jacket from https://unsplash.com/photos/KUK-Z5aHjbg