인터넷 프로그래밍 #5-2 CSS3 - 문자와 글꼴

인터넷 프로그래밍
5-2 CSS3 - 문자와 글꼴

 

단원 목표

1. 문자(Texts) 스타일을 나열하고 각각에 대해 설명할 수 있다.
2. 글꼴(Fonts) 스타일을 나열하고 각각에 대해 설명할 수 있다.
3. 문자와 글꼴을 활욯나 페이지를 구성할 수 있다.

문자(Texts) 스타일
문자색상(Color)
H1{color:blue;}
색이름
#ff0000

문자 정렬(Alignment)
H1{text-align:center;}
center, left, right, justify

문자장식(Decoration)
a{text-decoration:none;}

문자변환(Transformation)
a{text-transform:uppercase;}
lowercase, capitalize

문자간격(Spacing)
letter-spacing
line-height
word-spacing
white-space

 

글꼴(Fonts) 스타일
-올바른 글꼴 사용의 중요성
1. 읽기 쉬운 글꼴
2. 글꼴의 올바른 색상
3. 텍스트 크기

글꼴 스타일
Sanserif(고딕) 와 Serif(명조)체

글꼴의 일반적인(Generic) 종류
1. Serif - Times New Roman Georgia, Garamond
2. Sans-serif : Arial, Verdana, Helvetica
3. Monospace : Courier New, Lucida Console, Monaco
4. Cursive : Brush Script m7, Lucida handwrting
5. Fantasy : Copperplate, Papyrus

글꼴 크기(Font-size) - pixels, em(pixels/16), %, points

글꼴 속성 단축형
font-style
font-size/line-height
font-family
=> {font:20px Arial, sans-serif;}

문자와 글꼴 활용 예

 

 

 

 

 

 

 

 *** ***  *** ***  *** ***  *** ***  *** ***  *** *** 간단정리 *** ***  *** ***  *** ***  *** ***  *** ***  *** *

문자 색상 - 색이름, #ff0000, rbb(255,0,0)
문자정렬-center, left, right, justify
문자변환-lowercase, capitalize
글꼴크기-pixels, em등
글꼴속성-font-size/line-height, font-style, font-family