1. 텍스트 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>텍스트 꾸미기</title>
<style>
h1{text-align: right;}
p.p1{text-align: right;text-indent: 3em;}
p.p1 span{text-decoration: line-through;}
p.p2{text-align: center;text-indent: 1em;}
p.p2 span{text-decoration: overline;}
p.p3{text-decoration: none;}
</style>
</head>
<body>
<h1>텍스트 꾸미기</h1>
<hr>
<p class="p1">HTML의 태그 만으로 기존의 워드 프로세서와 같이 들여쓰기, 정렬, 공백, 간격 등과 세밀한 <span>텍스트 제어</span>를 할 수 없다.</p>
<br>
<p class="p2">그러나, <span><strong>스타일 시트</strong></span>는 이를 가능하게 한다. 들여쓰기, 정렬에 대해서 알아본다.</p>
<br>
<p class="p3"><a href="https://www.naver.com">밑줄이 없는 네이버 링크</a></p>
</body>
</html>2. 폰트 설정하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>폰트</title>
<style>
body{
font-family: "Times New Roman",Serif;
font-size: large;
}
h1{font: italic bold 40px consolas, sans-serif;}
</style>
</head>
<body>
<h1>Consolas font</h1>
<hr>
<p style ="font-weight:900">font-weight 900</p><br>
<p style="font-weight:100">font-weight 100</p><br>
<p style="font-style:Italic">Italic Style</p><br>
<p style="font-style:Oblique">Oblique Style</p><br>
<p>현재 크기의 <span style="font-size: 150%">1.5배</span> 크기로</p>
</body>
</html>3. 텍스트 그림자 - text-shadow
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>텍스트 그림자</title>
<style>
div{
font : normal 24px verdana
}
.dropText{
text-shadow : 3px 3px;
}
.redText{
text-shadow : 3px 3px red;
}
.blurText{
text-shadow : 3px 3px 5px skyblue;
}
</style>
</head>
<body>
<h1>텍스트 그림자 만들기</h1>
<hr>
<div class="dropText">Drop Shadow</div>
<div class="redText">Color Shadow</div>
<div class="blurText">Blur Shadow</div>
<div class="glowEffect">Glow Effect</div>
<div class="wordArtEffect">WordArt Effect</div>
<div class = "threeDEffect">3D Effect</div>
<div class = "multiEffect">Multiple Shadow Effect</div>
</body>
</html>4. 색 테이블 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>색 테이블 만들기</title>
</head>
<body>
<header>
<h1>색 이름과 코드</h1>
</header>
<hr>
<table border="1">
<thead><tr><th>이름</th><th>코드</th><th>색</th><th>이름</th><th>코드</th><th>색</th></tr></thead>
<tbody>
<tr><th>brown</th><th>#A52A2A</th><th><p style="color : #A52A2A;background-color : #A52A2A">11111</p></th><th>DeepSkyBlue</th><th>#00BFFF</th><th><p style="color : #00BFFF;background-color :#00BFFF">11111</p></th></tr>
<tr><th>Blueviolet</th><th>#8A2BE2</th><th><p style="color : #8A2BE2;background-color :#8A2BE2">11111</p></th><th>DeepSkyBlue</th><th>#FFD700</th><th><p style="color : #FFD700;background-color :#FFD700">11111</p></th></tr>
<tr><th>DarkOrange</th><th>#FF8C00</th><th><p style="color : #FF8C00;background-color :#FF8C00">11111</p></th><th>DeepSkyBlue</th><th>#6B8E23</th><th><p style="color : #6B8E23;background-color :#6B8E23">11111</p></th></tr>
</tbody>
</body>
</html>