FONT 스타일 시트

FONT 스타일 시트

 

FONT STYLE  >>>

HTML 에서 <H>태그와 <FONT> 태그를 이용하여 글꼴 크기와 색상을 지정하였으나 다양한 효과를 주지는 못함

 

속성	기능	예
FONT-FAMILY:글꼴명;	글꼴 종류 지정	FONT-FAMILY:돋움체;
COLOR:색상명 혹은 색상값	모든 태그에서 글꼴 색상 지정	COLOR : RED; 혹은 COLORl#FF0000;
FONT-SIZE:글꼴크기	글꼴크기 지정	FONT-SIZE:9pt; 혹은 FONT-SIZE:20px
FONT-WEIGHT:굵기 지정	글꼴의 굵기를 지정	FONT-WEIGHT : BOLD, 혹은 FONT-WEIGHT:700;
FONT-STYLE:ITALIC혹은NORMAL	글꼴 기울임 지정	FONT-STYLE:ITALIC

 

선택자 (selector) 종류와 css 구현  >>> 

 

1. 범용(universal) 선택자

 

형식 :*{속성:값}         html 페이지 내의 모든 태그에 지정한 속성의 값이 적용   예 *{font-size:12pt;color:green}      html내의 모든 글꼴의 크기 12, 색상은 녹색으로 표기

 

 

2. id 선택자

 

형식 :#아이디명{속성:값}      아이디를 지정하고 속성값을 정의하면 html 항목에서 해당 항목 속성을 기술하여 값을 적용    예) #midfont{font-family:돋움체;font-size:14pt;color:red}   <div id="midfont">바람과 햇빛의 작품</div>                           html 내의 <div>태그에서 midfont 아이디 지정하면 아래 결과 표시   단, 일회성으로 사용할 때 쓰인다.

 

 

3. 클래스(class) 선택자

 

형식 :.클래스명{속성:값}      클래스명을 지정해주면 html 항목에서 해당 클래스 속성을 기술하여 값 적용   예)   .midfont{font-family:돋움체;font-size:14pt;color:red}   <div class="midfont">바람과 햇빛의 작품</div>   html 내의 <div> 태그에서 midfont 클래스를 지정하면 위의 id 선택자와 동일한 결과 표시

 

 

4. 명시적(type) 선택자

 

형식 :명시한 태그{속성:값}     지정한 태그 항목에 대해서 정해진 속성의 값을 적용   예) h1,h2{font-family:돋움체;color:green}   <h1>,<h2> 태그항목에 한하여 글꼴 돋움체, 글꼴 색상은 녹색으로 지정

 

 

 

선택자 (selector) 종류와 css 구현 >>>

 

 

1. Font-Family 속성

 

시스템 글꼴 - 윈도우 시스템에서 제공되는 기본 글꼴 (돋움, 굴림, 궁서, 바탕체)

기본글꼴 - 필기체, 명조체, 장식 스타일 - (serif, sanserif, fantasy, monospace) 와 같은 글꼴을 사용

 

2. Font-size 속성

 

구분	단위	구분	단위
절대단위	Pt point (1포인트 = 0.27인치)	상대단위	Px pixels (해상도에 대한 상대크기)
	In inch (1인치 = 2.54cm)		Em ems (기존 글꼴 크기에 대한 상대크기)
	Cm (1센티미터 = 10mm)		Ex exs (소문자 x 높이를 1로 봤을 때 상대크기)
	Pc picas (1pc = 12pt)		% (기존 글꼴 크기에 대한 상대적 크기를 백분율로 표시한 것)

 

※ 참고 9pt=12px=0.75em