06-2 텍스트 스타일

color 속성 - 글자 색 지정하기

h1 {
    color:rgb(0,200,0); /* rgb 값 사용 - 녹색 계열 */
}
h2 {
    color:blue; /* 색상 이름 사용 - 파랑 */
}  
.accent {
    color:#f00; /* 16진수 사용 - 빨강, #ff0000으로도 사용 */
}

text-decoration 속성 - 텍스트에 줄 표시하기/없애기

• none : 밑줄 표시x
• underline : 밑줄 표시o
• overline : 영역 위로 선을 그린다.
• line-through : 영역을 가로지르는 선(취소 선)을 그린다.

text-transform 속성 - 텍스트 대, 소문자 변환하기

• none : 변환하지 않는다.
• capitalize : 시작하는 첫 번째 글자를 대문자로 변환한다.
• uppercase : 모든 글자를 대문자로 변환한다.
• lowercase : 모든 글자를 소문자로 변환한다.
• full-width : 가능한 모든 문자를 전각 문자로 변환한다.

text-shadow 속성 - 텍스트에 그림자 효과 추가하기

/* 기본형
    text-shadow:가로거리(양수값:글자오른쪽, 음수값:글자왼쪽) 세로거리(양수값:글자아래쪽, 음수값:글자위쪽) 번짐정도 색상;
*/
.shadow1{ 
    color:orange;
    text-shadow:1px 1px; /* 가로거리1px 세로거리1px */
}
.shadow2 {
    text-shadow:5px 5px 3px #f00; /* 가로거리5px 세로거리5px 번짐정도3px 색상#f00(빨강) */
}
.shadow3 { 
    color:#fff;
    text-shadow:7px -7px 5px #000; /* 가로거리7px 세로거리-7px 번짐정도5px 색상#000(검정) */
}

white-space 속성 - 공백 처리하기

• normal : 여러 개의 공백을 하나로 표시한다.
• nowrap : 여러 개의 공백을 하나로 표시하고, 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다.
• pre : 여러 개의 공백을 그대로 표시하고, 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시한다.
• pre-line : 여러 개의 공백을 하나로 표시하고, 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다.
• pre-wrap : 여러 개의 공백을 그대로 표시하고, 영역 너비를 넘어가는 내용은 자동으로 줄을 바꿔 표시한다.

letter-spacing과 word-spacing 속성 - 텍스트 간격 조절하기

자간은 가능하면 em 단위로 지정하는 것이 좋다.