CSS의 글자 모양 관련 스타일 속성들은 상당히 많은 종류의 것들이 제공되며 이들을 이용하면 글꼴부터 색상, 크기, 등등 다양한 글자 속성들을 제어할 수 있다.
● Font-family 속성
Font-family 속성은 지정된 태그나 영역의 글꼴을 지정하기 위해 사용된다.
H2{
font-family:"굴림", "돋움", "comic Sans MS";
}
굴림 돋움 comic Sans MS 이 3가지는 우선 순위를 나타낸다....
컴퓨터 마다 내가 원하는 글꼴이 다 있을 수는 없으므로... 굴림이 없으면 돋움으로 돋움이
없으면..comic Sans MS로 하라는 뜻!
● Font-size 속성
고정 크기 단위 ↓
▶ 단위 ◁ ▶ 설 명 ◁
in 글자 크기를 인치 단위로 표시.
cm 센티미더 단위로 표시.
mm 밀리미터 단위로...
pt 폰트 단위로...
pc 파이카 단위로... 1파이카는 12포인트 이다.
medium 약 12포인트 정도의 크기로 표시.
small medium 보다 1.5배 정도 작게 표시
x-small medium 보다 3배 정도 작게 표시
xx-small medium 보다 4.5배 정도 작게 표시
large medium 보다 1.5배 정도 크게 표시
x-large medium 보다 3배 정도 크게 표시
xx-large medium 보다 4.5배 정도 크게 표시
상대 크기 단위 ↓
▶ 단위 ◁ ▶ 설 명 ◁
em 기준 글꼴 문자의 높이를 기준으로 글꼴 크기를 지정.
ex 기준 글꼴 문자의 영문 소문자 높이를 기준으로 글꼴 크기를 지정.
% 기준 글꼴 문자의 크기에 대한 % 단위로 크기를 지정.
px 글꼴의 크기를 픽셀 단위로 표시.
larget 기준 글꼴보다 크게 표시함.
smaller 기준 글꼴보다 작게 표시함.
● Font-style 속성 : 글자에 기울임 속성을 주기 위한 것!
▶ 속성 값 ◁ ▶ 설 명 ◁
narmal 아무런 효과를 주지 않음.
italic 글자를 이탤릭 체로 표시함.
oblique 글자에 기울임 속성을 줌.
italic oblique 둘중 아무거나 사용해도 된다. 둘다 거의 동일함.
● Font-cariant 속성 : 이 속성은 영문 소문자를 대문자로 표시하기 위해 사용되는 속성.
▶ 속성 값 ◁ ▶ 설 명 ◁
normal 아무런 효과를 주지 않음!
small-caps 소문자를 대문자로 바꾸어서 표시함.
● Font-weight 속성 : 이 속성은 글꼴의 두께를 설정하는 속성
▶ 속성 값 ◁ ▶ 설 명 ◁
normal 아무런 효과를 주지 않음!
bold 글자에 HTML의 <B>태그를 준 것과 같은 두께로 굴게 표시됨.
border 글자를 조금 더 굵게 표시함.
lighter 글자를 조금 더 얇게 표시함.
100~900 100(아주 얇게)부터 900(아주 두껍게) 사이의 숫자를 100 단위로 지정 가능!
사용 법 : H2{ font-weight:bold; }
.bolder{ font-weight:800; }
● Font-spacing 속성 : 이 속성은 글자와 글자 사이의 간격을 설정.
사용 법 : H2{ font-spacing: 170% } → 글자와 글자 사이의 간격이 170% 만큼 늘어남
● Font-height 속성 : 이 속성은 줄 간격을 설정하는 속성.
사용 법 : BODY { line-height : 170% } → 줄 간격이 170%로 늘어남.
● Font-color 속성 : 이 속성은 글꼴의 색상을 지정하는 속성.
사용 법 : BODY{ color : DarkGray; }
H2{ color : #FFA500; }
★ 지금 까지 설명한 속성으로 글꼴을 제어해 보자!! (소스 참조)★
<html>
<head>
<title>CSS로 글꼴을 제어해 봅시다.</title>
<style type="text/css">
body, H2 { font-family:굴림; font-size:12pt } //글자체 : 굴림체 size : 12폰트
H2 {color:#339900; font-weight:900} // 글자색상 : :#339900 글꼴 두께 : 졸 큰거...
.title { font-family:돋움; color:Navy; font-weight:bold } //나머지는 설명 안해도 참고할것!
p.text {line-height:170%;}
</style>
</head>
<body>
<H2>CSS 글꼴 제어의 모든 것!!</H2>
<p>CSS로 글꼴을 제어하는 속성들을 살펴봅시다</p>
<div class="title">font-family 속성</div>
<p class="text">font-family 속성은 글꼴의 모양을 바꾸기 위해 사용됩니다.
글꼴의 이름을 지정할 때 글꼴 이름에 공백이 있으면 반드시 따옴표를 함께
사용하세요!</p>
<div class="title">font-size 속성</div>
<p class="text">font-size 속성은 글자의 크기를 지정합니다. 고정 크기
단위와 상대 크기 단위 중 하나를 이용해서 마음에 드는 크기로 글꼴의
크기를 지정해 보세요</p>
</body>
</html>