글자의 스타일을 좌우하는 두 속성
▣ 글자의 스타일을 좌우하는 두 속성
? FONT 속성 : 글꼴 모양을 결정
? TEXT 속성 : 텍스트(문장) 모양을 결정
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단위로 설정한다.
⑤ letter-spacing
HTML에서 글자 간격을 설정하려면 특수문자 ‘ ’를 이용했다. 스타일시트는 글자끼리의 간격을 letter-spacing을 이용해서 설정한다. 그 값으로는 절대크기 | 상대크기를 이용한다.
⑥ line-height
HTML상에서는 줄 간격을 지정하려면 <BR> 태그를 이용해서 한 줄을 삽입하거나 <P>또는 <DIV>