color
텍스트의 색상을 지정
[표현법]
선택자{color : 색상명 / 16진수 / rgb(x,x,x) rgba / hsl / hsla}
<body>
<p id="c"> 텍스트 색상 테스트 </p>
</body>
<style>
#c{
color: red;
color: #FFA7AF;
color: rgb(0, 128, 128);
color: rgba(0,255,13,0.3);
color: hsl(200,50%,50%);
color: hsla(200,50%,50%);
}
</style>
text-decoration
텍스트에 줄을 긋거나, 없앨 때 사용
[표현법]
선택자 { text-decoration : none / underline / overline / line-through;}
<body>
<ul>
<li id="td1">underline : 텍스트 영역 아래에 줄 긋기</li>
<li id="td2">line-through : 텍스트 영역 가운데에 줄 긋기</li>
<li id="td3">overline : 텍스트 영역 위에 줄 긋기</li>
</ul>
<a href="http://www.naver.com" id="td4"> 네이버로 </a>
</body>
<style>
#td1{ text-decoration: underline;}
#td2{ text-decoration: line-through;}
#td3{ text-decoration: overline;}
#td4{ text-decoration: none; color:black}
</style>
text-transform
영문 텍스트의 대소문자를 변환 시 사용
[표현법]
선택자{ text-transform : uppercase / lowercase / capitalize}
<body>
<ul>
<li id="tt1">uppercase : 모두 다 대문자로</li>
<li id="tt2">LOWERCASE : 모두 다 소문자로</li>
<li id="tt3">capitalize : 영문자의 첫글자만 대문자로</li>
</ul>
</body>
<style>
#tt1{ text-transform: uppercase;}
#tt2{ text-transform: lowercase;}
#tt3{ text-transform: capitalize;}
</style>
text-align
텍스트 정렬 시 사용
[표현법]
선택자{text-align : left(기본값) / justify / right / center;}
<body>
<h4> 양쪽정렬 </h4>
<p style="text-align : justify">
인간의 청춘 바이며,...
</p>
<h4>오른쪽 정렬</h4>
<p style="text-align : right">
인간의 청춘 바이며,...
</p>
<h4>가운데 정렬</h4>
<p style="text-align : center">
인간의 청춘 바이며,...
</p>
</body>
text-shadow
텍스트에 그림자효과를 줄 때 사용
- 번짐정도와 색상은 생략 가능
- 가로거리와 세로거리가 양수일 경우, 오른쪽 아래에 그림자 생성
- 가로거리와 세로거리가 음수일 경우, 왼쪽 위에 그림자 생성
- 번짐정도가 0일 경우, 그림자 색이 진해짐
- 색상은 기본값이 글자색과 같음
[표현법]
선택자 { text-shadow : 가로거리(x좌표) 세로거리(y좌표) 번짐정도 색상;}
<body>
<span class="shadow" id="ts1">HTML</span> <br><br><br>
<span class="shadow" id="ts2">HTML</span> <br><br><br>
<span class="shadow" id="ts3">HTML</span>
</body>
<style>
.shadow{font-size: 50px; font-weight: 900;}
#ts1{
color : orangered;
text-shadow : 5px 5px 5px yellow;
}
#ts2{
color : white;
text-shadow : 0px 0px 10px black;
}
#ts3{
text-shadow : 0px 0px 4px gray,
0px -5px 4px yellow,
0px -10px 8px orange,
0px -15px 14px orangered,
0px -22px 19px red;
}
</style>
