CSS 텍스트 관련 스타일

텍스트의 생상 지정 :  color: 색상명

#c{
    color: red;
    color: #d8add8;
    color: rgb(70,127,136);
    color: rgba(255, 15, 15, 0.399);
    color: hsl(210, 50%, 50%); /* h: 색상값(0~360), s:채도(%), l:명도(%)*/
    color: hsla(210, 50%, 50%, 0.5);
}

16진수 ex) #d8add8

rgb(x,x,x) ex) rgb(70, 127, 136)

rgba (x,x,x,x(투명도)) ex) rgba(255, 15, 15, 0.399(투명도))

hsl(x,x,x)  ex) hsl(210, 50%, 50%)

hsla(x,x,x,(투명도)) ex) hsla(210, 50%, 50%, 0.5)

 

---

텍스트에 줄 긋기 : text-decoration

#td1{text-decoration: underline;}
#td2{text-decoration: line-through;}
#td3{text-decoration: overline;}

undeline : 텍스트 아래 줄 긋기

line-through : 텍스트 중간에 줄 긋기

overline : 텍스트 위에 줄 긋기

---

텍스트에 그림자 효과 주기 : text-shadow

.shadow{font-size: 50px; font-weight: 900;}
#ts1{color:orangered;
text-shadow:5px 5px; /*번짐 정도 생략시 기본적으로 선명한 그림자, 색상 생략시 글자의 색상 그대로*/
text-shadow:-5px -5px 5px yellow;
}

text-shadow: 가로 거리(x축) 세로 거리(y축), (번짐정도),  (색상)

---

영문 텍스트 대소문자 변환 : text-transform

#tt1{text-transform: uppercase;}
#tt2{text-transform: lowercase;}
#tt3{text-transform: capitalize;}

uppercase : 모든 문자를 대문자로 변환시킴

lowercase : 모든 문자를 소문자로 변환시킴

capitalize : 영문자의 첫 글자를 대문자로 변환시킴