1 . 강아지 사이트를 구현하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-family: "맑은 고딕", "고딕", "굴림";
}
#wrapper{
width: 800px;
margin: 0 auto;
}
header{
width: 100%;
height: 150px;
background-color: #f46075;
background-image: url(img/nav2.png);
background-repeat: no-repeat;
background-position: right center;
}
header nav{
float: left;
width: 70%;
margin: 0px;
}
nav ul{
margin-top: 80px;
}
nav ul li{
display: inline;
margin: 13px;
list-style: none;
}
nav ul li a{
text-decoration: none;
color: #ffffff;
font-weight: bold;
margin-top: 50px;
}
section{
padding: 5px;
}
.content1{
border: 1px solid #ccc;
width: 250px;
height: 220px;
margin: 5px;
padding: 10px;
float: left;
}
.content1 h3{
font-size: 1em;
}
.content1 p{
font-size: 0.75em;
line-height: 20px;
}
aside{
width: 200px;
height: 590px;
border: 1px solid green;
float: right;
margin-top: -250px;
text-align: center;
}
footer{
width: 100%;
height: 60px;
background-color: #333;
clear: both;
text-align: center;
line-height: 60px;
color: white;
font-size: 0.75em;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<nav>
<ul>
<li><a href="#">애완견 종류</a></li>
<li><a href="#">입양하기</a></li>
<li><a href="#">건강돌보기</a></li>
<li><a href="#">더불어살기</a></li>
</ul>
</nav>
</header>
<section>
<div id="wrapper1">
<h1>강아지 용품 준비하기</h1>
<div class="content1">
<h3>강아지 집</h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</div>
<div class="content1">
<h3>강아지 먹이</h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</div>
<div class="content1">
<h3>밥그릇, 물병</h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</div>
<div class="content1">
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</div>
</div>
</section>
<aside>
<div><img src="img/1.png" alt=""></div>
<div><img src="img/2.png" alt=""></div>
<div><img src="img/3.png" alt=""></div>
</aside>
<footer>
Copyright 2012 funnycom
</footer>
</div>
</body>
</html>
2. 요안도라를 구현하시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font: 14px '맑은 고딕';
}
.container{
width: 960px;
margin: 0 auto;
background-color: #ffffff;
border: 1px solid #e7e7e7;
}
header{
position: relative;
background-image: url('images/bg2.png');
background-repeat: no-repeat;
background-position: left top;
height: 280px;
}
header h1{
position: absolute;
right: 20px;
bottom: 70px;
font-size: 3em;
color: #ffc;
}
header h2{
position: absolute;
right: 20px;
bottom: 30px;
font-size: 2em;
color: #ff0;
}
.navi{
background: #271717;
width: 960px;
height: 60px;
margin-top: -15px;
}
.navi ul{
list-style: none;
height: 40px;
padding-top: 10px;
padding-bottom: 5px;
}
.navi ul li{
display: inline;
float: left;
font-size: 15px;
}
.navi a{
display: block;
padding: 10px 5px 5px 35px;
color: #fff;
width: 150px;
text-decoration: none;
}
.navi a:hover{
color: #fc0;
}
section{
width: 710px;
height: 500px;
border: 1px solid #ccc;
float: left;
}
aside{
width: 248px;
background-color: rgb(212, 247, 217);
float: right;
height: 550px;
}
.content{
padding: 3px 3px 3px 20px;
}
footer{
clear: both;
width: 960px;
height: 80px;
background-color: rgb(2, 58, 9);
color: white;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Joandora</h1>
<h2>가장 제주다운 수산리집</h2>
</header>
<nav class="navi">
<ul>
<li><a href="#">이용 안내</a></li>
<li><a href="#">객실 소개</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</nav>
<section>
<h2>요안도라 소개</h2>
<h3>¤ 요안도라는 게스트 하우스(Guest House) 형식의 농어촌 민박입니다</h3>
<p>성산의 날씨는 다음주 내내 높은 구름에 햇살 가득이라고 합니다. 목요일이면 섭씨 27도까지 오른다고 하지만, 늘 부는 바람이 쾌적한 균형을 잡아 마당에 마당에 나가 앉아 있는 시간이 많아질듯 합니다 </p>
<p>오늘은 사진에 보이는 긴 돌담을 따라 들어오는 요안도레 올레 입구에 특곤색의 대문을 달았습니다.</p>
<p>내일은 두달 여동안 밖거리에 만든 데스트 하우스에 연백색의 황토 페인트를 칠할 예정입니다. <br>
그리고 이것저것 사소한 저이를 마치고 나면, 나이 드시고 젊고 한 미지의 새식구들을 설렘으로 만나고 함께하고, 도시의 바븐 생활로 소원해진 오래된 친구와의 우정을 이 제주에서 새롭게 열어나가기 위해 요안도라를 세상에 알리려고 합니다.
</p>
<img src="images/banner2.png" alt="">
</section>
<aside>
<h3>¤ 알립니다</h3>
<p>게스트하우스 예약은 전화 070-###-#### 로 직접 통화하시는게 가장 정확하고 빠릅니다. 인터넷 전화이므로 시외 전화 요금이 부과되지 않습니다.</p>
<img class="content" src="images/2.jpg" alt="">
<img class="content" src="images/1.jpg" alt="">
<img class="content" src="images/4.jpg" alt="">
</aside>
<footer>
<address>제주특별자치도 남제주군 성산읍 수산리 000 번지 요안도라</address>
<p><i>yoan##@naver.com</i></p>
<p>Copyright ⓒ. All rights reserved</p>
</footer>
</div>
</body>
</html>
