(CSS) font-size: 62.5%, 왜 기본 페이지의 글꼴을 이렇게 정의할까?

html {
    font-size: 62.5%;
    font-family: Arial, Helvetica, sans-serif
}

html 페이지의 기본 font-size가 62.5%로 정의되어 있다.

대부분의 웹페이지의 기본 텍스트 크기가 16px이고 16px * 62.5% = 10px이기 때문이다.

 

최상위의 font-size를 10px로 지정해 놓으면 상속자들의 화면에서 텍스트 크기를 쉽게 계산할 수 있다. 1.5em은 1.5 * 10 = 15px 등 간편하게 10을 곱하게 된다. 그래서 font-size: 62.5 는 글자 비례형 레이아웃을 만들때 흔히 사용된다. 

 

스타일을 위에서 처럼 선언을 하면 px, pt 단위를 쉽게 em 단위로 변환할 수 있다.

100px: 10em;

13pt: 13em or 15.6em(MAC 기준 1pt = 1px, Window 기준 1pt = 1.34px

 

아 CSS는 정말 배우기는 쉬워도 깊게 들어가서 적용하려면 어렵다!!

힘내자!!