본문 바로가기

디자인/CSS 강좌

CSS 기초강좌 6 (Font 속성)

반응형

CSS Font 속성

폰트 속성은 Html이나 CSS 코딩에서 가장 많이 사용하고 있고 이름이 곧 내용이므로 특별한 설명은 필요 없을 것 같네요.


Property/ValueDescription
font-style

폰트의 이탤릭체 여부를 지정한다 (normal, italic, oblique)

font-variant

폰트를 작은대문자로 바꾼다 (normal, small-caps)

font-weight

폰트의 두께 지정 (normal, bold, bolder, lighter, 100,200,300, ...)

font-size/line-height

폰트크기와 줄간격 지정

font-family

폰트의 종류 지정-이름이 두단어 이상이면 ""로 감싼다. ("Times New Roman",Serif)


그냥 font 만을 사용해서 위의 모든 속성을 한꺼번에 지정할 수도 있습니다. (일부 속성 생략 가능)

단, 순서는 맞춰야 하겠지요. "font-style font-variant font-weight font-size/line-height font-family"

 Example : p.ex10 {font:italic bold 12px/30px Georgia, serif;}



[ EM ]

구버전의 IE에서 폰트 크기조정 문제를 피하기 위해 많은 개발자들이 px가 아닌 Em을 많이 사용하고 있습니다.

1EM의 크기는 16px 입니다. 

px와 em의 계산 공식은 EM = px  / 16 입니다.

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

하지만 위와 같이 해도 여전히 IE의 버전에 따라 원래 목적했던 크기보다 더 커지거나 더 작아지는 문제가 있습니다. 

이를 해결하기 위해서는 <body>의 요소에 먼저 %로 기본 글꼴의 크기를 설정해놓고 폰트의 크기를 조절하는 것입니다.

body {font-size:100%;}

h1 {font-size:2.5em;}

h2 {font-size:1.875em;}

p {font-size:0.875em;}


또한 em은 부모로 부터 상속되는 폰트입니다. 

예를 들어보면 <body>의 폰트 크기가 2em이라고 하고 <body>안의 <p>의 폰트 크기가 2em이라고 정했다면 p태그의 크기는 4em이 되어버립니다.

<div style="font-size: 1.5em">그냥 div 

<p style="font-size: 1.5em;">div안에 있는p에 2em 적용</p>

</div>

결과
그냥 div

div안에 있는p에 2em 적용


아래는 예제 입니다.
Example
<style>
p.ex1 {font-style:italic;}
p.ex2 {font-variant:small-caps;}
p.ex3 {font-weight:bold;}
p.ex4 {font-size:40px;}
p.ex5 {font-family:"Times New Roman",Georgia,Serif;}
p.ex6 {font-size:2.1em;}
p.ex10 {font:italic bold 12px/30px Georgia, serif;}
</style>

<p class="ex1">This is font-style</p>
<p class="ex2">This is font-variant</p>
<p class="ex3">This is font-weight</p>
<p class="ex4">This is font-size</p>
<p class="ex5">This is font-family</p>
<p class="ex6">This is font-size used "EM"</p>
<p class="ex10">This is font</p>
<p class="ex10">This is font</p>


결과

This is font-style

This is font-variant

This is font-weight

This is font-size

This is font-family

This is font-size used "EM"

This is font

This is font



반응형