CSS text style 속성 1

<Today's Goals>

• 텍스트 스타일
• color 속성
• text-decoration 속성
• text-transform 속성
• text -shadow 속성
• white-space 속성
• letter-spacing / word-spacing 속성

<What i learned>

• text-shadow 쉼표로 값을 구분해서 여러개의 그림자를 만들 수 있다. 잘 이용하면 그라데이션 가능.
• 문단 스타일로 텍스트 정렬하는 것 말고 white-space를 이용해 공백이랑 문장 줄 넘김 한번에 조절 할 수 있다니 특히 텍스트가 많은 article 등에 사용하면 유용할 것 같다.

<Questions>

• 그림자말고 글자 자체에도 그라데이션도 넣을 수 있을까?
• 글자에만 배경을 따로 지정해서 색상을 넣는 방법은?

---

<텍스트 스타일>

텍스트 스타일 -문단에 사용되는 스타일

 

color  속성 - 글자 색 지정

태그 {color:rgb(0,200,0);} /*rgb 값 사용*/
태그 {color:blue;} /*색상 이름 사용*/
태그 {color:#FDDCD3;} /*16진수 사용*/

 

text-decoration  속성 - 글자 색 지정

속성 값

• none : 밑줄을 표시하지 않음.
• underline : 밑줄을 표시.
• overline : 영역 위로 선.
• line-through : 영역을 가로지르는 선.

text-decoration 예시

none

underline

overline

line-throu

 

text-transform  속성 - 텍스트 대'소문자 변환

영문자를 표기할 때 텍스트의 대'소문자를 원하는 대로 바꿀 수 있다.

• none : 변환하지 않음.
• capitalize :  시작하는 첫 번째 글자를 대문자로 변환.
• uppercase : 모든 글자를 대문자로 변환.
• lowercase : 모든 글자를 소문자로 변환.
• full-width : 가능한 모든 문자를 전각 문자로 변환. ( 전각 문자 : 고정 폭 영문자 너비의 두 배 정도 너비의 문자)

text-transform 예시

none

capitalize

uppercase

lowercase

full-width

 

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

텍스트에 그림자 효과를 추가할 수 있다. ,쉼표로 값을 구분하여 여러번 그림자를 적용할 수 있다.

• 가로 거리 : 텍스트부터 그림자까지 가로 거리를 입력. 양수 값은 글자 오른쪽, 음수 값은 글자 왼쪽에 그림자가 위치.
• 세로 거리 :  텍스트부터 그림자까지의 세로 거리를 입력. 양수 값은 글자 아래쪽, 음수 값은 글자 위쪽에 그림자가 위치.
• 번짐 정도 : 양수 값을 사용하면 그림자가 모든 방향으로 퍼져나가 그림자의 크기가 커진다. 음수 값은 축소되어 보인다.
• 기본값은 0.
• 색상 : 기본 값은 현재 글자의 색상.

HTML5

 

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

• normal : 여러 개의 공백를 하나로 표시. 기본 값.
• nowrap : 여러 개의 공백을 하나로 표시, 영역 너비를 넘어가도 계속 한 줄로 표시.
• pre : 여러 개의 공백을 그대로 표시, 영역 너비를 넘어가도 계속 한 줄로 표시.
• pre-line : 여러 개의 공백을 하나로 표시, 영역 너비를 넘어가면 자동으로 줄 바꿈.
• pre-wrap : 여러 개의 공백을 그대로 표시, 영역 너비를 넘어가면 자동으로 줄 바꿈.

 

letter-spacing 와 word-spacing 속성 - 텍스트 간격 조절

자간은 가능하면 em 단위로 지정. 그래야 글꼴이 바뀌어도 자간이 유지된다.

• letter-spacing : 낱 글자 사이 간격을 조절
• word-spacing : 단어와 단어 사이 간격을 조절 ( 주로 사용하진 않음)