[반응형 웹디자인] 상대단위 em rem

em 과 rem 은 주변 상황에 따라 그 크기를 달리할 수 있는 가변성을 지니고 있지만,

브라우저나 기기 화면에 따라 크기가 달라지는 단위는 아니다.

 

html 기본 글꼴 크기는 16px 이다.

 

font-size: em

em 은 부모요소의 글꼴 크기이다.

 

부모요소의 글꼴이 24px 이면

2em 은 48px 이 됨.

 

rem 은 기본값을 그대로 따라가기 때문에 16px 이다.

html 태그에 따로 글꼴 표시를 정해주면 그 값이 rem 이 된다.

 

padding 과 margin 을 사용할 때도 em rem 을 사용할 수 있음

rem 은 그대로 html 기본 글꼴크기를 가져가지만

em 은 자기 자신의 font-size 에 기준을 두고있음.

 

부모 font-size 32px,

나 자신 font-size 16px 일 때

나 자신의 여백 em 은 16px 이다.