<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>HTML5 레이아웃</title>
<style>
h1{font-size: 2em;}
h2{font-size: 1.5em;}
h3{font-size: 1.0em;}
p{
line-height: 20px;
font-size: 12px;
}
body{
font-family: "맑은 고딕", "고딕", "굴림";
}
#con{
width: 800px;
margin: 0 auto;
}
header{
width: 100%;
height: 150px;
background-color: #f46075;
background-image: url(images/nav2.png);
background-repeat: no-repeat;
background-position: right center;
}
header nav{
float: left;
width: 70%;
margin-top: 50px;
}
nav ul{
list-style-type: none;
}
nav ul li{
display: inline;
float: left;
font-weight: bold;
margin: 10px;
}
nav ul li a{
color: white;
text-decoration: none;
}
a:hover{
color: yellow;
}
section{
float: left;
width: 580px;
padding: 5px;
}
section article{
float: left;
height: 250px;
width: 220px;
margin: 5px;
padding: 15px;
border: 1px dotted #ccc;
}
aside{
float: right;
width: 250px;
height: auto;
border: 1px solid darkgreen;
text-align: center;
}
.at1, .at2, .at3, .at4{
transition: 2s;
-webkit-transition: 2s;
-moz-transition: 2s;
-o-transition: 2s;
-ms-transition: 2s;
}
.at1:hover{
background-color: #cf9;
border:1px solid green;
}
.at2:hover{
background-color: #a2d0ff;
border:1px solid blue;
}
.at3:hover{
background-color: #ebcbfe;
border:1px solid purple;
}
.at4:hover{
background-color: #fc3;
border:1px solid red;
}
footer{
clear: both;
width: 800px;
margin-bottom: 0;
background-color: #333;
color: white;
text-align: center;
height: 50px;
}
</style>
</head>
<body>
<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="con"></div>
<h2>강아지 용품 준비하기</h2>
<article class="at1">
<h3>강아지 집 </h3>
<p>강아지가 편히 쉴 수 있는 포근한 집이 필요합니다. 강아지의 집은 강아지가 다 큰 후에도 계속 쓸 수 있는 집으로 구입하세요.집을 구입하실 때는 박음질이 잘 되어 있는지, 세탁이 간편한 제품인지 꼭 확인하시고 고르시는 것이 좋습니다.</p>
</article>
<article class="at2">
<h3>강아지 먹이 </h3>
<p>강아지의 먹이는 꼭 어린 강아지용으로 나와있는 사료를 선택하세요. 강아지들은 사람에 비해 성장속도가 8배정도 빠르답니다. 따라서 강아지에게는 성장속도에 맞는 사료를 급여하셔야 합니다. 사람이 먹는 음식을 먹게 되면 양념과 향신료에 입맛이 익숙해지고, 비만이 될 가능성이 매우 높아집니다. 강아지용 사료는 생후 12개월까지 급여하셔야 합니다.</p>
</article>
<article class="at3">
<h3>밥그릇, 물병 </h3>
<p>밥그릇은 쉽게 넘어지지 않도록 바닥이 넓은 것이 좋습니다.물병은 대롱이 달린 것으로 선택하세요. 밥그릇에 물을 주게 되면 입 주변에 털이 모두 젖기 때문에 비위생적이므로 대롱을 통해서 물을 먹을 수 있는 물병을 마련하시는 것이 좋습니다.</p>
</article>
<article class="at4">
<h3>이름표, 목줄</h3>
<p>강아지를 잃어버릴 염려가 있으니 산책할 무렵이 되면 이름표를 꼭 목에 걸어주도록 하세요. 그리고 방울이 달린 목걸이를 하고자 하실 때는 신중하셔야 합니다. 움직일 때마다 방울이 딸랑 거리면 신경이 예민한 강아지들에게는 좋지 않은 영향을 끼칠 수 있기 때문입니다.</p>
</article>
</div>
</section>
<aside>
<img src="images/1.png" alt="리트리버">
<img src="images/2.png" alt="코카">
<img src="images/3.png" alt="비글">
</aside>
<footer>
<p>Copyright 2012 funnycon</p>
</footer>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>애완견 돌보기</title>
<link rel="stylesheet" href="css/layout-result.css" type="text/css">
</head>
<body>
<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>
<article>
<h2>애완견 종류</h2>
<section>
<h3>활달한 강아지</h3>
<dl>
<dt>요크셔 테리어</dt>
<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>
<dt>말티즈</dt>
<dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
<dt>포메 라이언</dt>
<dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다. </dd>
<dt>골든 리트리버</dt>
<dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>
</dl>
</section>
<section>
<h3>온순한강아지</h3>
<dl>
<dt>쉬즈</dt>
<dd>얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd>
<dt>퍼그</dt>
<dd>매우 사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해 많은 운동량이 필요하지 않다.</dd>
<dt>래브라도 리트리버</dt>
<dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는 성질이 있다 공을 가지고 노는 것을 가장 좋아한다. 현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>
</dl>
</section>
<section>
<h3>사납지만 복종적인 강아지</h3>
<dl>
<dt>미니어쳐핀셔</dt>
<dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>
<dt>푸들</dt>
<dd>사납진 않으나, 상당히 복종적이며, 지능지수가 애완견종 중 가장 뛰어나다.</dd>
<dt>폭스테리어</dt>
<dd>가정에서 키우기에 적합한 품종이다. 보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다. 이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>
</dl>
</section>
</article>
<aside>
<h3>건강한 강아지는</h3>
<ul>
<li>코가 젖어있고 눈꼽이 없어야 합니다.</li>
<li>털에 윤기가 있는 것을 골라야 합니다.</li>
<li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
<li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
<li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>
</ul>
</aside>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>
<a href="#"> 이용. 이동하고자 하는 단락에 id를 부여하고 하이퍼링크 주소에는 id를 뜻하는 #을 앞에 붙여줌
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>링크 만들기</title>
</head>
<body>
<h1>앵커 만들기</h1>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<ul id="menu">
<li><a href="#content1"> 메뉴 1</a></li>
<li><a href="#content2"> 메뉴 2</a></li>
<li><a href="#content3"> 메뉴 3</a></li>
</ul>
<h2 id="content1">내용1</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[홈으로]</a></p>
<h2 id="content2">내용2</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[홈으로]</a></p>
<h2 id="content3">내용3</h2>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p>웹 문서가 너무 길 경우 필요한 곳마다 문서 안에 이름을 붙여놓고 그 위치로 한번에 이동하는 링크를 만들 수 있는데, 이 기능을 앵커(anchor)라고 합니다. </p>
<p><a href="#menu">[홈으로]</a></p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>1박 2일 가족 여행 코스</title>
</head>
<body>
<h1>관광 안내 전화</h1>
<p>한국관광공사에서는 전국의 관광안내소와 공동으로 여러분의 여행편의를 위해 관광안내전화 1330 서비스를 연중무휴 실시하고 있습니다.
</p>
<p>
1330에는 해당 지역의 지도와 관광 가이드북, 관광안내소를 대신할 수 있을 정도의 다양한 정보가 있습니다. 원하는 관광지는 물론이며 숙박, 교통, 음식점 등의 자세한 정보를 한국어를 비롯한 영어, 중국어, 일어의 3개 국어로도 이용 가능합니다.
<ul>
<li>일반전화: (국번없이) 1330</li>
<li>휴대전화: 064-1330</li>
</ul>
</p>
</body>
</html>
