2014년 2월 9일 일요일

[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%}

댓글 없음:

댓글 쓰기