[CSS] 글꼴 설정 / font-size 속성

font-size 속성은 말그대로 글자의 크기를 조정할수 있는 속성입니다
font-size 속성은 반드시 단위정보를 가지고 있어야 한다는 특징이 있는데요


HTML에서는 단위없이 수치값만 입력한다면 보통 픽셀(Pxixel)을 기본 단위로 지정합니다
하지만 CSS의 경우에는 단위가 없는 수치값은 대부분 에러가 발생하는데요


그렇다면 수치값의 단위로는 어떤 값이 사용이 될까요?

CSS font-size속성에 사용되는 수치값의 단위는 보통 상대값과 절대값으로 분류 할수 있습니다

절대값은 보통 px이라는 단위로 사용되며
사용자의 글자 확대 여부,창,크기 등의 상황에 관계없이 고정된 값을 갖는다는 특징을 가지고 있습니다

반대로

상대같은 em이라는 단위로 사용되며
상대값을 갖는 글자 크기,화면 레이아웃 등의 css속성은 상황에 따라 상대적으로 변한다는 특징을 가지고 있습니다

주로 반응형 웹사이트에 보시면 브라우저 창의 크기 변화에 따라
글자 크기와 레이아웃 형태가 변형되는것을 알수 있을텐데요 이부분이 em이라는 단위와
관련이 높다고 보시면 될것 같네요


px이라는 단위는 설명을 드리지 않아도 쉽게 이해할수 있을겁니다
하지만 em이라는 단위는 조금 낫설게 느껴지실거 같은데요

그렇다면 em이라는 단위에대해 조금 자세히 알아아보도록할까요^^


em이라는 단위는 %비슷한 개념을 가지고 있는 단위입니다
기본글자의 크기가 12point 라 할때 1em은 100% 의미하죠


h1{font-size:1em} = h1{font-size:100%}
h1{font-size:1.6em} = h1{font-size:160%}
h1{font-size:1.4em} = h1{font-size:140%}
h1{font-size:1.2em} = h1{font-size:120%}
h1{font-size:2em} = h1{font-size:200%}