virgule's notes

em

WEB 2011/07/08 13:49

상대 단위.

컨텍스트에 관한 것.

em은 부모 엘리먼트의 폰트 크기에 따라 상대적으로 계산이 된다.

body { font: normal 100% Helvetica, Arial, sans-serif;}

여기서 폰트 크기 100%는 브라우저의 기본 폰트 크기에 맞춰지는데
보통 브라우저의 기본 폰트 크기는 16px이다.

위에서와 같이 body 폰트가 100%인 상태에서,

h1의 폰트 크기를 24px로 하고 싶다면?

해당 엘리먼트의 폰트크기를 픽셀로 한 것을 target으로 잡고

이를 컨테이너(컨텍스트)의 폰트 크기로 나눈다.

target / context = result

여기서는 24 / 16(body의 기본 타입크기를 16px로 간주) = 1.5

즉, 헤더는 기본 body의 폰트 사이즈의 1.5배 또는 1.5em 크기이다.

h1 {font-size: 1.5em; }

body에 폰트크기를 픽셀로 설정하고 다른 요소의 폰트크기(h1,h2, blockquotes, strong, classes 등)를 em으로 설정하면,

body크기가 변함에 따라 텍스트 크기를 변하게 할 수 있다.

* { font-size:1em;}
body { font-size:0.75em;}

모든 서체 크기가 12px로 설정된다.

IE에서는 상속 문제가 발생하는데 이를 해결하는 방법은 다음과 같다.

html { font-size: 100%; }

Posted by lot49

Trackback 0 Comment 0

1 2 3 4 5 ... 26