layoutexam

by rootjang

HTML

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="utf-8">
	<title>애완견 돌보기</title>
</head>
<body>
	<header>
		<h1>애완견 종류</h1>
		<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>
		<article id="pet1">
		  <h3>활달한 강아지</h3>
		  <dl>
			<dt>요크셔 테리어 </dt>
			<dd>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</dd>
			<dt>말티즈 </dt>
			<dd>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</dd>
			<dt>포메 라이언</dt>
			<dd>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다. </dd>
		   <dt>골든 리트리버</dt>
		   <dd>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</dd>
		</dl>
		</article>
		<article id="pet2">
		  <h3>온순한강아지</h3>
		  <dl>
			<dt>쉬즈</dt>
			<dd> 얼굴에서 풍기는 모습처럼 온순, 쉽게 친숙해지고 우호적이며,어린아이나 여성들이 기르기에 적합한 견종이다.</dd>
		   <dt>퍼그</dt>
		   <dd>매우 사려가 깊고 사랑스러운 견종이며 그다지 손질이 필요하지 않고 식사량에 비해 많은 운동량이 필요하지 않다.</dd>
		   <dt>래브라도 리트리버</dt>
		   <dd>침착하고 영리하여 어린이들을 안심하고 맡길 수 있다. 사람을 즐겁게 해주려는 성질이 있다 공을 가지고 노는 것을 가장  좋아한다. 현재 맹인 안내견과 마약견으로 사용중이다. 온순한 강아지를 좋아하는 분에게는 적합한 견종이다.</dd>
		  </dl>
		</article>
		<article id="pet3">
		   <h3>사납지만 복종적인 강아지</h3>
		   <dl>
			  <dt>미니어쳐핀셔</dt>
			  <dd>경계심이 강하고 영리하며 작은 몸집에 비해 매우 용감하다. 주인에게 매우 복종적이며 작은 몸집에 보디가드 역할을 충실히 수행한다.</dd>
			   <dt>푸들 </dt>
				<dd>사납진 않으나, 상당히 복종적이며, 지능지수가 애완견종 중 가장 뛰어나다.</dd>
				<dt>폭스테리어</dt>
				 <dd>가정에서 키우기에 적합한 품종이다.  보호본능이 강하고 정이 많다. 하지만 사냥을 하던 본능이 조금은 남아있어 사나운 면이 있다. 이종을 좋은 품종으로 기르기 위해서는 어릴 때부터 엄한 훈련이 필요하기도 하다.</dd>
		   </dl>
		 </article>
		<aside>
			<h3>건강한 강아지는</h3>
			<ul>
			  <li>코가 젖어있고 눈꼽이 없어야 합니다.</li>
			  <li>털에 윤기가 있는 것을 골라야 합니다.</li>
			  <li>입에서 고약한 냄새가 나면 병이 있다는 증거입니다.</li>
			  <li>가장 활발하게 움직이는 녀석을 고르는게 좋습니다.</li>
			  <li>강아지들 중에서 적당한 체구를 유지한 강아지가 좋습니다.</li>
			</ul>
		</aside>
	</section>
	<footer>
		<p>Copyright 2012...

CSS

body{
      font-family:"맑은 고딕", "고딕", "굴림";
    }
    header {
      width: 80%;
      margin-right: auto;
      margin-left: auto;
      background-color: #069;
      padding: 10px;
      overflow: hidden;
    }
    header h1{
      width:40%;
      float:left;
      color:#fff;
    }

    header nav {
      width:60%;
      float:right;
    }

    nav ul{
      list-style-type:none;
    }

    nav ul li{
      display: inline;
      float: left;
      margin: 15px;
    }


    nav ul li a{
      color:white;
      text-decoration:none;
    }
    p {
      font-size:15px;
      line-height:20px;
    }
    dt {
      font-weight:bold;
      color:purple;
    }

    h1{
      font-size:2em;
    }

    section{
      width: 80%;
      margin-right: auto;
      margin-left: auto;
      border:5px solid #333;
      padding:5px;
      overflow:hidden;
    }
    article h3{
      background-image:url(images/bg.png);
      background-repeat:no-repeat;
      background-position:left center;
      padding-left:30px;
    }
    aside{
      clear:both;
      height:auto;
      padding:10px;
    }
    footer{
      clear:both;
      width: 80%;
      margin-right: auto;
      margin-left: auto;
      margin-top:0;
      padding:10px;
      background-color:#333;
      color:white;
      text-align:center;
    }

    article {
      width: 90%;
      height: auto;
      margin: 20px 10px;
      padding: 20px;
    }

    #pet1 {
      border: 1px solid black;
      border-radius: 10px;
    }

    #pet2 {
      border: 1px dotted blue;
      border-radius: 20px;
    }

    #pet3 {
      border: 1px double green;
      border-top-left-radius: 30px;
      border-bottom-right-radius: 30px;
    }