웹마당넷 |CSS 강좌 - [제03강] 스타일 시트(CSS)의 글꼴(Font) 관련 속성

제 목

CSS 강좌 - [제03강] 스타일 시트(CSS)의 글꼴(Font) 관련 속성

작성자

컴쟁이

등록일

2008-12-19 17:31:18

조회수

6,583

스타일 시트에는 글꼴이나 색상, 여백, 텍스트 등을 지원하는 다양한 속성들을 가지고 있다. 이러한 속성들을 유형별로 나누어 살펴보고 이번 강좌에서는 먼저, 글꼴에 관련된 속성들에 대하여 설명하고자 한다.

1. 스타일 시트(CSS)의 Font 관련 속성 : 글자에 대한 스타일 지정

[Property]	[Value]	[Description]
font-family	굴림, 돋움, 궁서, Arial	글자체(글꼴)
font-size	20pt, 20px, 20pc, 20in, 120%, 2em, larger, smaller	글자 크기
font-style	normal, italic, oblique	글자 스타일
font-weight	thin, normal, bold, bolder, lighter 100,200,300,...,800,900	글자 굵기
line-height	20pt, 20px, 20pc, 20in, 120%, 2em	줄간격
font-variant	small-caps	텍스트를 작은 대문자로 보기
font		속성들을 한 문자열로 묶어서 한번에 설정

[☞크기 단위] - pt(point)를 주로 사용
pt(point)	1/72 in로 1인치(2.54cm)를 72개로 나누었을 때 나오는 글자의 크기
px(pixel)	모니터에서 한 개의 도트(점)을 나타냄(모니터 해상도에 따라 크기가 달라질 수 있음)
pc(pica)	12 pt를 1 pc로 나타냄.
in,cm,mm	각각 1 inch(2.54cm), 1 cm, 1 mm의 크기
%	기준 글자에 대한 크기를 %로 나타냄.
em	기준 글자에 대한 글자의 높이를 나타냄.
※ pt, px, pc, in, cm, mm는 절대적 크기인대 반해 %나 em은 상대적인 크기라 보면 된다.

2. 실전 예제(font-size)

[Source]

[Description]

<html>
<head>
<style type="text/css" >

</style>
</head>

<body>
<h1>글자크기 12pt</h1>
<h2>글자크기 12px</h2>
<h3>12pc</h3>
<h4>글자크기 12mm</h4>
기준 글자 크기는 12 포인트<p>
<b>기준 글자 크기는 12 포인트에 blod</b>
<h5>글자크기는 12pt이면서 굵게</h5>
<h6>글자크기 18pt(기준글자 12pt의 1.5배) </h6>
</body>
</html>

-> 글자 크기 12 포인트
-> 글자 크기 12 포인트보다 작음
-> 글자 크기 12×12 즉, 144 포인트
-> 글자 크기 12 밀리미터
-> 기준이 되는 글자 크기와 비교
-> 기준 글자는 bold가 없어서 적용해 봄
-> 100%이므로 기준 글자크기에 bold
-> 150%이므로 기준 글자의 1.5배 크기

[Result]

글자크기 12pt

글자크기 12px

12pc

글자크기 12mm

기준 글자 크기는 12 포인트

기준 글자 크기는 12 포인트에 blod

글자크기는 12pt이면서 굵게

글자크기 18pt(기준글자 12pt의 1.5배)

3. 실전 예제(기타)

[Source]

[Description]

<html>
<head>
<style type="text/css" >

</style>
</head>

<body>
<h1>글자의 기울임</h1>
<h2>기준 글자로 바꿈 (bold 없음)</h2>
<h3>줄간격을 50pt </h3>
<h4>merry christmas! </h4>
</body>
</html>