CSS 기초강좌 6 (Font 속성)

CSS Font 속성

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

Property/Value	Description
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

결과

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