본문 바로가기

IT/Web

CSS 지식 - em과 rem의 차이

세로 광고판 입니다

em과 rem의 차이점

 

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

 

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

em과 rem은 무엇인가? w3c의 css3 스펙 중 distance unit을 살펴봤다. css의 거리 단위는 크게 상대적 길이와 절대적 길이가 있다. 상대적 길이는 em, ex, ch, rem, vw, vh, vmin, vmax가 있고 절대적 길이는 cm, mm, q, in, pt, pc, px가 있다. 대개 크로스 브라우징이나 쉬운 계산 때문에 강제적으로 길이를 px로 많이 사용한다. 여러 디바이스를 모두 대응해야 하는 문제 때문에 em을 사용하기도

indivdot.github.io

 

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

CSS의 길이 단위 중 em과 rem은 상대적으로 크기를 정합니다. em - 상위 요소 기준 em 단위는 상위 요소 크기의 몇 배인지로 크기를 정합니다. 예를 들어 [...]

www.codingfactory.net

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

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