CSS 기초 강좌 - 5강. Font 속성 : 글자 제어

혹시 예전에는 폰트를 설정하려면 이렇게 쓰시지 않으셨나요?

<font size="10">Font 속성</font>  

물론 이렇게 쓰셔도 되지만, 웹 표준에 맞지 않습니다.

CSS 기초 강좌 5강 - Font 속성 : 글자 제어

1. 글자 크기를 설정하는 속성

font-size:x

x에는...

pt - 글자크기를 포인트 단위로 표시 1포인트는 1/72인지이며 가장 많이 사용되는 단위

em - 기준 글꼴 문자의 높이를 기준으로 글꼴크기를 지정
% - 기준 글꼴 문자의 크기에 대한 %단위로 글꼴 크기를 지정
px - 글꼴의 크기를 픽셀 단위로 표시

2. 글자 두께를 설정하는 속성

font-weight:x

x에는...

 normal - 아무것도 주지 않습니다. : 미리보기

 bold, bolder - 굵게 : 미리보기

3. 글꼴을 설정하는 속성

font-family:x

x에는 폰트 이름이 들어갑니다.

body {font-family:"맑은 고딕", "나눔고딕", Gothic, sans-serif}

폰트 이름에 띄어쓰기가 있으면 " " 혹은 ' '를 

4. 글자의 대소문자를 설정하는 속성 (font에 포함되지 않습니다.)

text-transform:x

x에는...

 uppercase - 모두 대문자로

 lowercase - 모두 소문자로

 capitalize - 앞글자만 소문자로

 * 영문만 가능합니다.

5. 글자를 꾸미는 속성

font-style:x
 x에는...
  italic, oblique - 기울림 : 미리보기 
 

7. 영문 대문자 만들기

font-variant:x

x에는...

 small-caps - ex) Windows XP =>Windows XP