html jquery css

em, rem 상대단위 글꼴 상대 단위

2022. 10. 6. 22:11
반응형
SMALL
<div style="font-size:20px;">
    <p style="font-size: 1em;">1em 은 20픽셀이다.</p>    
    <p style="font-size: 2em;">2em 은 40픽셀이다.</p>    
</div>

 

 

em,  rem 상대 단위 

em : 부모 요소의 글꼴 크기를 기준으로 따라간다.

rem : 루트 요소의 글꼴크기(16px: 기본값)를 기준으로 따라간다. 

 

루트요소 란  <html>요소를 의미한다. 

루트요소의 기본글꼴크기는  16px 이다. 

 

 

[ 여백 크기를 정할 때  em ]

em 으로 내, 외부 여백 크기를 정할 때는 ( margin 이나 padding 사용할 때 )
자기 자신의 글자 크기를 기준으로 한다. 

 

 

기본적인 브라우저 기준으로 볼 때

1em 은  16px 을 기준으로 한다. 

 

 

 

 

 

 

 

반응형
LIST