<!DOCTYPE html>
<html lang="ko">
<head>
<title>태그로 스타일 만들기</title>
<meta charset="utf-8">
<style>
body{
background-color:linen;
color:blueviolet;
margin-left:30px;
margin-right:30px;
}
h3{
text-align:center;
color:darkred;
}
</style>
</head>
<body>
<h3>손연재</h3>
<hr>
<p>저는 체조선수 손연재입니다. 음악을 들으면서 책읽기를 좋아합니다
김치 찌개와 막국수를 무척 좋아합니다.</p>
</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>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>박스모델</title>
<style>
div {
background:yellow;
padding:20px;
border:5px dotted red;
margin:30px;
}
</style>
</head>
<body>
<h3>박스 모델</h3>
<p>margin 30px, padding 20px, border 5px의 빨간색 점선</p>
<hr>
<div>
<img src="mio.png" alt="고양이 눈">
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>이미지 테두리 만들기</title>
<style>
p {
background:yellow;
width:200px;
height:60px;
padding:10px;
border:20px solid lightgray;
}
#round { border-image : url("border.png") 30 round; }
#repeat { border-image : url("border.png") 30 repeat; }
#stretch { border-image : url("border.png") 30 stretch; }
</style>
</head>
<body>
<h3>이미지 테두리 만들기</h3>
<hr>
다음은 원본 이미지입니다.<br>
<img src="border.png" alt="원본">
<hr>
<p>20x20 크기의 회색 테두리를 가진 p태그</p>
<p id="round">round 스타일 이미지 테두리</p>
<p id="repeat">repeat 스타일 이미지 테두리</p>
<p id="stretch">stretch 스타일 이미지 테두리</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>text-shadow와 box-shadow</title>
<style>
h2 {
text-align: center;
color : yellow;
text-shadow : 2px 2px 2px black,
0 0 25px blue,
0 0 5px darkblue;
}
img:hover {
box-shadow : 2px 2px 2px black,
0 0 25px blue,
0 0 5px darkblue
}
</style>
</head>
<body>
<h2>Most Visited Pages</h2>
<hr>
<table>
<tr>
<td><a href="http://www.naver.com"><img src="naver.png" width="200" height="150"></a></td>
<td><a href="http://www.chosun.com"><img src="chosun.png" width="200" height="150"></a></td>
<td><a href="http://www.amazon.com"><img src="amazon.png" width="200" height="150"></a></td>
</tr>
</table>
</body>
</html>
