색/텍스트 (Color/Text)

* 적용할 범위 지정하기

- style 속성으로 지정하는 경우를 제외하고 CSS는 셀럭터로 적용 대성할 지정함.

방법	서식	작성 예
태그에서 지정하기	태그명 { }	span{font-size:large;}
태그와 글래스명에서 지정하기	태그명.클래스명{ }	div.group1{background-color:red;}
클래스명에서 지정하기	클래스명{ }	.group1{text-align:right;}
id에서 지정하기	#id명{ }	#code1{color:blue;}
여러 요소에 적용하기	태그명1.태그명2{ }	span, div{font-size:large;}
모든 요소에 적용하기	*{ }	*{background-color:red;}

* 색 변경하기

- 다음 프로퍼티를 사용하면 색을 지정할 수 있음.

.mycolor {

color: #ff0000;                        // color 프로퍼티 : 글자색을 지정함

background-color: #999999;      // background-color 프로퍼티 : 배경색을 지정함

}

* 색 지정하기

- 색은 빛의 삼원색인 빨강, 녹색, 파랑의 세 가지 값(RGB 값)으로 지정함.

- 숫자가 클수록 해당 색이 강하게 나타남.

색명	red
rgb( )와 %값	rgb(100%, 0, 0)
rgb( )와 십진수 값	rgb(255, 0, 0)
#와 16진수 값	#ff0000

* 텍스트의 모양을 변경하기

[글꼴을 지정하는 프로퍼티]

.myfont {

font-size: 120%; 

font-style: italic;

font-weight: bold;

font-family: serif;

}

1) font-size 프로퍼티

단위	요소	예
%	정해진 글꼴에 대한 배율	120%
px	세로 픽셀의 크기	14px
em	현재 문자의 크기에 대한 배율	1.2em
ex	소문자 x의 크기에 대한 배율	2.3ex
이름지정	작은 것부터 순서대로 xx-small, x-small, small, medium, large, x-large, xx-large

2) font-family 프로퍼티

- 글꼴의 종류를 지정함(복수 지정 가능).

(글꼴명)         "MS 고딕" 등

serif - 명조체 계열

sans-serif - 고딕체 계열

cursive - 필기체 계열

fantasy - 장식 계열

monospace - 등폭

3) font-weight 프로퍼티

- 글자의 굵기를 지정함.

100, 200, ..., 900 큰 쪽이 진함.

normal : 표준(=400) // 초기값

bold : 굵은 문자(=700)

bolder : 굵은 문자

lighter : 가는 문자

4) font-style 프로퍼티

- 기울임 글꼴을 지정함

normal : 표준 // 초기값

italic : 이탤릭체

oblique : 기울임체

[텍스트의 위치를 지정하는 프로퍼티]

.mytext {

line-height: normal;

letter-spacing: normal;

text-align: center;

vertical-align: baseline;

}

1) line-height 프로퍼티

- 행의 높이를 지정함.

normal(표준) // 초기값 

또는 %나 px로 지정

2) letter-spacing 프로퍼티

- 글자 간격을 지정함.

normal(표준) // 초기값

또는 %나 px로 지정

3) vertical-align 프로퍼티

- 세로 방향의 표시 위치를 지정함.

baseline : 베이스라인 맞춤 // 초기값

top : 상단 맞춤

middle : 중앙 맞춤

bottom : 하단 맞춤

text-top : 텍스트의 상단 맞춤

text-bottom : 텍스트의 하단 맞춤

super : 윗첨자

sub : 아랫첨자

%나 px로도 지정 가능

4) text-align 프로퍼티

- 텍스트를 표시할 위치를 지정함.

left : 왼쪽 정렬    // 초기값

right : 오른쪽 정렬

center : 가운데 정렬

justify : 균등 배분

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)