em? rem?

폰트 사이즈를 설정하는 단위들

• em, rem, %, px

em?

• em폰트를 사용하는 것은 부모 요소에 따라 크기가 달라진다.
• 다른 요소의 폰트 크기와 연관된 크기라고 생각하면 된다.
• 단점 : 종속적 성질 = 물려받는 크기에 따라 크기가 변한다.

rem?

• rem은 현재 요소의 폰트 크기가 최상위 요소의 폰트 크기와 연결 된다.
• 첫 최상위 요소는 html이다.

자식 요소에서는 %와 em이 같다
Ex)200% == 2em

만약 패딩에서의 %와 em, rem은 ?

• 패딩값을 주고 싶은데 어떤 단위를 사용해야될지 모르겠다!
  • %는 부모 요소의 크기를 참조하지만 em과 rem은 항상 부모 요소의 폰트 크기 속성을 참조한다!!!
    • 그 중 rem은 폰트 크기 속성의 최상위 요소를 참조하고 em은 폰트 크기를 참조한다.

브라우저 세팅에서 기본 font-size가 22px로 되어있는데 변경하고 싶은 요소의 부모 요소에다가 font-size:200%;를 적용한 후 자식 요소에다가 padding: 0.1em을 적용하면

//브라우저 기본 폰트 크기가 22px이라고 가정하자!
parent{
	font-size:200%;
}// 22 * 2 = 44px
son{
	padding:0.1em;
}//44 * 0.1 = 4.4px이 적용 된다.

(22(기본 세팅) x 2(부모 요소 200%)) = 44 x 0.1 = 4.4px로 padding이 적용됨

이런 식으로 계산이 된다.
그렇다면 rem은 어떻게 계산이 될까 ?

//브라우저 기본 폰트 크기가 22px이라고 가정하자!
parent{
	font-size:200%;
}//이 부모 요소의 폰트 크기는 무시하고 최상위(html)요소의 폰트 크기를 참조한다.
son{
	padding:0.1em;
}기본 폰트가 22px * 0.1 = 2.2px의 padding이 적용된다.