<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>배경 꾸미기</title>
<style>
div {
background-color: rgb(218, 191, 188);
background-size: 100px 100px;
background-image: url("spongebob.png");
background-repeat: no-repeat;
background-position: center center;
}
div {
width:400px;
height:400px;
color:rgb(114, 14, 244);
font-size:16px;
}
</style>
</head>
<body>
<h3>div 박스에 배경 꾸미기</h3>
<hr>
<div> Spongebob is an over-optimistc sponge that annoys other characters.</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>
