HTML 레이아웃 최종

<!DOCTYPE html> 
<html> 
<head> 
  <title></title> 
  <style type="text/css"> 
  *{ 
    padding: 0; 
    margin: 0; 
    text-decoration: none; 
    list-style:none; 
  } 
  header { 
    position: relative; 
    overflow:hidden; 
    width:720px; 
    height:200px; 
 
    margin:0 auto; 
  } 
  #logo { 
    position: absolute; 
    left:10px; 
    bottom: 48%; 
  } 
 
  header a { 
    background-color:grey; 
    color:white; 
    border:1px solid grey; 
  } 
 
  header a:hover { 
    background-color:white; 
    color:black; 
  } 
 
  header li:first-of-type > a { 
    border-radius: 10px 0 0 10px; 
  } 
 
  header li:last-of-type > a { 
    border-radius: 0 10px 10px 0; 
  } 
 
  header li { 
    float:left; 
  } 
 
  #topmenu { 
    position: absolute; 
    right:0; 
    top:20px; 
  } 
 
  #bottommenu{ 
    position: absolute; 
    right:0; 
    bottom:20px; 
  } 
 
  #topmenu a { 
    padding:10px; 
  } 
 
  #bottommenu a { 
    padding:5px; 
  } 
 
  </style> 
 
  <style type="text/css"> 
  #mainsection { 
    margin:0 auto; 
    width:720px; 
    position: relative; 
 
  } 
 
  article { 
    margin-bottom:10px; 
    border:1px solid black; 
    padding: 5px 
  } 
 
  #articlesection { 
    width:500px; 
  } 
 
  #aside { 
    position: absolute; 
    right:0; 
    top:0; 
 
    width:200px; 
    border:1px solid black; 
  } 
  #aside input { 
    display:none; 
  } 
 
  #aside input:first-of-type:checked ~ #firstdisplay { 
    display:block; 
  } 
  #aside input:last-of-type:checked ~ #seconddisplay { 
    display:block; 
  } 
 
  #aside input:first-of-type:checked ~ label:first-of-type { 
    background-color:black; 
    color:white; 
  } 
 
  #aside input:last-of-type:checked ~ label:last-of-type { 
    background-color:black; 
    color:white; 
  } 
 
  #aside div { 
    display: none; 
  } 
 
  #footer { 
    width:720px; 
    margin:0 auto; 
    text-align: center; 
    border:1px solid black; 
  } 
  </style> 
</head> 
<body> 
  <header> 
    <div id = "logo"> 
      <h1> LOGO! </h1> 
    </div> 
    <nav id = "topmenu"> 
      <ul> 
        <li><a href="#">ONE</a></li> 
        <li><a href="#">TWO</a></li> 
        <li><a href="#">THREE</a></li> 
        <li><a href="#">FOUR</a></li> 
      </ul> 
    </nav> 
    <nav id = "bottommenu"> 
      <ul> 
        <li><a href="#">ONE</a></li> 
        <li><a href="#">TWO</a></li> 
        <li><a href="#">THREE</a></li> 
        <li><a href="#">FOUR</a></li> 
      </ul> 
    </nav> 
  </header> 
  <div id = "mainsection"> 
    <section id = "articlesection"> 
      <article> 
        <p> 
          <h1>AAAA</h1> 
          AAAAAAAAAAAAAAAAAAAAAA <br> 
          AAAAAAAAAAAAAAAAAAA <br> 
          AAAAAAAAAAAAAAAAAAAAAA  
        </p> 
      </article> 
      <article> 
        <p> 
          <h1>BBBB</h1> 
          BBBBBBBBBBBBBBBBBBBB <br> 
          BBBBBBBBBBBBBBBBBBBBB<br> 
          BBBBBBBBBBBBBBBBBBB<br> 
          BBBBBBBBBBBBBBBBBB 
        </p> 
      </article> 
      <article> 
        <p> 
          <h1>CCCC</h1> 
          CCCCCCCCCCCCCCCCCCCCCCCC<br> 
          CCCCCCCCCCCCCCCCCCCCCc<br> 
          CCCCCCCCCCCCCCCCCCCCCC 
        </p> 
      </article> 
    </section> 
    <aside id = "aside"> 
      <input type="radio" name = "radiobtn" id = "radiobtn1" checked="checked"><label for = "radiobtn1">ONE</label></input> 
      <input type="radio" name = "radiobtn" id = "radiobtn2"><label for = "radiobtn2">TWO</label></input> 
      <div id = "firstdisplay"> 
        <ul> 
          <li><a href="#">ONE</a></li> 
          <li><a href="#">ONE</a></li> 
          <li><a href="#">ONE</a></li> 
          <li><a href="#">ONE</a></li> 
        </ul> 
      </div> 
      <div id = "seconddisplay">					 
        <ul> 
          <li><a href="#">TWO</a></li> 
          <li><a href="#">TWO</a></li> 
          <li><a href="#">TWO</a></li> 
          <li><a href="#">TWO</a></li> 
        </ul> 
      </div> 
    </aside> 
    <footer id ="footer"> 
      <h3>FOOTER</h3> 
    </footer> 
  </div> 
</body> 
</html>

 

 
확인하기