텍스트 관련 스타일- 텍스트

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

 

목차

• 1) 글자 색 지정 - color
  
• 2) 텍스트에 줄 표시 o,x - text-decoration
  
• 3) 텍스트 대·소문자 변환 - text-transform
  
• 4) 텍스트에 그림자 효과 추가 - text-shadow
  
• 5) 공백 처리 - white-space
  
• 6) 텍스트 간격 조절 - letter-spacing과 word-spacing

 

텍스트 스타일

1) 글자 색 지정 - color

선택자 { color: 색상}

- 사용할 수 있는 색상 값

• 16진수
• rgb, hsl
• 색상 이름

 

 

2) 텍스트에 줄 표시 o,x - text-decoration

선택자 { text-decoration: none 또는 underline 또는 overline 또는 line-through }

 

 

3) 텍스트 대·소문자 변환 - text-transform

선택자 { text-transform: 속성 값 }

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

 

 

4) 텍스트에 그림자 효과 추가 - text-shadow

선택자 { text-shadow: 속성 값 }

속성 값	설명
가로 길이 (필수 속성)	- 텍스트부터 그림자까지의 가로 거리를 입력한다. - 음수~양수 = 왼쪽~오른쪽
세로 길이 (필수 속성)	- 텍스트부터 그림자까지의 세로 거리를 입력한다. - 음수~양수 = 위쪽~아래쪽
번짐 정도	그림자가 번지는 정도를 나타낸다.
색상	- 그림자 색상을 지정한다. 한 가지만 지정할 수도 있고 공백으로 구분해 여러 색상을 지정할 수도 있다. - 기본값은 현재 글자 색이다.

 

 

5) 공백 처리 - white-space

선택자 { white-space: 속성 값}

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

 

 

6) 텍스트 간격 조절 - letter-spacing과 word-spacing

letter-spacing속성은 낱 글자 사이 간격을 조절하고, word-spacing속성은 단어와 단어 사이 간격을 조절한다.

선택자 { letter-spacing: 크기em}  //낱글자 자간 조절
선택자 { word-spacing: 크기em} //단어 자간 조절