Back Ground

CSS3 - rem 과 em의 차이점 본문

CSS

CSS3 - rem 과 em의 차이점

Back 2018. 11. 25. 16:57


rem과 em 


둘다 font 사이즈에 따라서 연산처리 되는 것 이다.


10em 과 10rem 동일하게   * 10 이 되는 것인데 


상위 요소의 폰트가 (기본 16px) 16일때  

16 * 10 = 160px이 되는 것 이다.



하지만 두 기능의 다른점이 있는데



[ rem ]

1
2
3
4
    width: 10rem;
    height: 10rem;
    /* 폰트 */
    font-size:3rem;
cs




[ em ]

1
2
3
4
    width: 10em;
    height: 10em;
    /* 폰트 */
    font-size:3em;
cs


이렇게 똑같은 수치의 em과  rem을 주었을때


서로 크기를 비교해보면 


em으로 주었을때 width의 크기는 480px 이고

rem으로 주었을대는 width의 크기가 160px 인 것을 확인 할 수 있다.



이는 무슨 차이냐면 


em은 자기 자신의 요소의 font-size에 영향을 받는 다는 것이다.

16(font)  * 3(font) = 48 * 10(width)  = 480px


하지만 


rem은 상위 부모요소( <html> )의 font-size에 영향을 받는다.

그래서 기본 font-size : 16px 이기 때문에

16 * 10 = 160px 

이 되는 것이다 .


확인 해보고 싶다면


<html> 에 font-size를 변경 해보고 테스트 해보면 된다.(rem은 html 최상의 요소에서 것만 인식)

요소의 사이즈가 px로 변하는건 개발자 도구에서 Computed 탭에서 확인 해면 된다.





저작자표시 비영리

'CSS' 카테고리의 다른 글

CSS - 이벤트 제어 (pointer-events)  (0) 2019.12.17
'CSS' Related Articles more
Comments