<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 색 활용</title>
<style>
div {
margin-left:30px;
margin-right:30px;
margin-bottom:10px;
color:white; /* 모든 <div> 글자 색은 white */
}
</style>
</head>
<body>
<h3>CSS3 색 활용</h3>
<hr>
<div style="background-color:deepskyblue">deepskyblue(#00BFFF)</div>
<div style="background-color:brown">brown(#A52A2A)</div>
<div style="background-color:fuchsia">fuchsia(#FF00FF)</div>
<div style="background-color:darkorange">darkorange(#FF8C00)</div>
<div style="background-color:darkcyan">darkcyan(#UU8B8B)</div>
<div style="background-color:olivedrab">olivedrab(#6B8E23)</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>텍스트 꾸미기</title>
<style>
h3 {
text-align: right; /* 오른쪽 정렬 */
}
span {
text-decoration: line-through; /* 중간 줄 */
}
strong {
text-decoration: overline; /* 윗 줄 */
}
.p1 {
text-indent: 3em; /* 3글자 들여쓰기 */
text-align: justify; /* 양쪽 정렬 */
}
.p2 {
text-indent: 1em; /* 1글자 들여쓰기 */
text-align: center; /* 중앙 정렬 */
}
</style>
</head>
<body>
<h3>텍스트 꾸미기</h3>
<hr>
<p class="p1">HTML의 태그만으로 기존의 워드 프로세서와 같이 들여쓰기,
정렬, 공백, 간격 세밀한 <span>텍스트 제어</span>를 할 수 있다</p>
<p class="p2">그러나, <strong>스타일 시트</strong>는 이를 가능하게 한다</p>
<a href="https://www.naver.com" style="text-decoration:none;">
밑줄 없는 네이버 링크</a>
</body>
</html>
