HTML5+CSS3]6-2 텍스트 스타일

https://www.youtube.com/user/easyspub

 

easyspub

⭐텍스트 스타일은 글자와 단어들, 그리고 글자들로 이루어진 문단에서 사용되는 스타

 

✔color 속성: 글자 색 지정하기

👉기본형 : color : <색상>

색상 값은 16진수나 rgb(또는 rgba), hsl(또는 hsla) , 색상 이름으로 표기한다

 

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

👉기본형 : text-decoration : none | underline | overline | line-through

텍스트에 밑줄을 긋거나 취소 선을 표시할 수 있다.

👉텍스트 링크의 밑줄을 없앨 때 사용하는 방법 : a {text-decoration:none}

 

 

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

👉기본형 : text-transform : none | capitalize | uppercase | lowercase | full-width

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

텍스트를 대,소문자 또는 전각 문자로 변환한다

 

 

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

👉기본형 : text-shadow : none | <가로 거리> <세로 거리> <번짐 정도> <색상>

텍스트에 여러 개의 그림자 효과 추가하기

 

 

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

👉공백을 어떻게 처리할지 지정할 수 있다

👉기본형 : white-space : normal | nowrap | pre | pre-line | pre-wrap

ex) 텍스트 안에 공백이 불규칙한 내용을 편집할때 모든 공백을 공백 한 칸으로 인식하고 줄을 바꾸지 않을때

td { white-space:nowrap;}  >> 줄 바꿈 없음

 

✔letter-spacing , word-spacing 속성 : 텍스트 간격 조절하기

👉텍스트 자간을 조절 할 때 사용한다

 

👉letter-spacing 속성은 낱 글자 사이의 간격을 조절한다

기본형 : letter-spacing : normal | <크기>

 

👉word-spacing 속성은 단어와 단어 사이 간격을 조절한다

기본형 :  word-spacing : narmal | <크기>