폰트 꾸미기

문서 작성시 글꼴 관련 스타일에 관한 속성이다. FONT 속성은 글꼴 모양을 결정하고 TEXT 속성은 텍스트(문장) 모양을 결정한다. 문서 중간에서 선언되는 스타일의 모양은 기본적으로 아래와 같다.

 

<font style="font-size:14px; color:#555555; font-weight:900">

 

1) 글꼴을 다양하게 하는 font 속성

속성	기능	형식
① font-family	글꼴을 설정	{font-family:굴림 | 돋움체, …}
② font-size	글꼴 크기를 설정	{font-size:절대크기 | 상대크기}
③ font-style	글꼴 기움임을 설정	{font-style: normal | oblique | italic}
④ font-weight	글꼴의 두께 설정	{font-weight:normal | bold | bolder | lighter}
⑤ letter-spacing	글꼴 간격 설정	{font-spacing:절대크기 | 상대크기}
⑥ line-height	줄의 높이 설정	{font-height:절대크기 | 상태크기}

 

① font-family

 

② font-size

웹 페이지의 모든 글꼴을 정돈 시키기 위해서 font-size속성을 가장 많이 사용한다.

 

★ 절대(고정) 크기의 단위 ★

 

표기	단위	표기	단위
in	인치(1인치=2.54cm)	xx-large	medium보다 4.5배 확대
cm	센티미터	x-large	medium보다 3배 확대
mm	밀리미터	large	medium보다 1.5배 확대
pt	포인트(1포인트=1/72인치)	small	medium보다 1.5배 축소
pc	파이카(1파이카=12포인트)	x-small	medium보다 3배 축소
medium	12pt 크기	xx-small	medium보다 4.5배 축소

 

 

 

★ 상대(비례) 크기의 단위 ★

 

표기	단위
em	기준 글꼴 문자의 높이
ex	기준 글꼴 문자의 영문 소문자 높이
%	기준 글꼴 크기의 대한 백분율 크기
px	1픽셀을 1로 하는 단위
larger	글자 크기를 앞에 입력한 글자보다 크게
smaller	글자 크기를 앞에 입력한 글자보다 작게

 

③ font-style

font-style에 사용되는 키워드는 normal, oblique, italic 세 가지가 있다. oblique은 기울임 효과를 주고, italic은 이탤릭체 모양인데 둘 다 비슷한 효과를 낸다.

 

④ font-weight

font-weight는 글자 두께를 설정한다. 속성값은 normal, bolder, bold, lighter가 있다. bolder는 조금 더 굵게, bold는 html의 <b>태그 효과, lighter는 글자가 가늘게 출력된다.

여기에 100(가장 가늘게) ~ 900(가장 굵게)의 숫자를 이용할 수도 있다. normal은 400과  동일하며, 숫자값은 100단위로 설정한다.