fluid ele exam

by rootjang

HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
  <title>애완견 돌보기</title>
  <style>
    #wrapper {
      width: 96%;
      margin: 0 auto;
    }

    header {
      background: #069;
      padding: 10px;
      overflow: hidden;
    }

    header h1 {
      width: 40%;
      float: left;
      font-size: 2.5em;
      font-family: "돋움", "굴림";
      color: #fff;
    }

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

    nav ul {
      list-style-type: none;
      margin-top: 30px;
    }

    nav ul li {
      display: inline;
      padding-top: 10px;
      margin-right: 20px;
    }

    nav ul li a, nav ul li a:visited {
      font-family: "돋움", "굴림";
      font-size: 1em;
      color: white;
      text-decoration: none;
    }

    section {
      border: 5px solid #333;
      overflow: hidden;
    }

    article {
      width: 29.17%;
      height: auto;
      float: left;
      margin-right: 1.5625%;
      margin-bottom: 20px;
      margin-top: 20px;
      padding: 0.5%;
      border: 1px solid #333;
      border-radius: 10px;
    }

    article:first-child {
      margin-left: 2.0823%;
    }

    article h3 {
      background: #333;
      padding-left: 30px;
    }

    dl {
      margin: 10px;
    }

    dt {
      font-weight: bold;
    }

    aside {
      clear: both;
      width: 93.75%;
      margin: 10px auto;
      padding: 10px;
      background-color: #99cc33;
    }

    footer {
      padding: 10px;
      background-color: #333;
      color: white;
      text-align: center;
    }

    footer {
      padding: 10px;
      background: #333;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
<div id="wrapper">
  <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>
 ...