CSS, HTML 연습

<h2><a href="#" target="_blank">메뉴 예시</a></h2>
<nav>
  <section>
    <div>
      <a href="#" target="_blank">Home</a>
    </div>
    <div>
      <a href="#" target="_blank">Tutorial</a>
    </div>
    <div>
      <a href="#" target="_blank">Articles</a>
    </div>
    <div>
      <a href="#" target="_blank">Inspiration</a>
    </div>
  </section>
</nav>
<article>
  <img src="http://bnx.oa.gg/img/20160913AM105101_1074.jpg" alt="">
  <img src="http://bnx.oa.gg/img/20160921PM33800_8489.jpg" alt="">
  <img src="http://bnx.oa.gg/img/20160913PM122312_9304.jpg" alt="">
  <img src="http://bnx.oa.gg/img/20160913PM122323_2917.jpg" alt="">
  
  
</article>

HTML ↑

body, h2 {
  margin:0;
  background-color:pink;
}
a {
  color:inherit;
  text-decoration:none;
  font-weight:bold;
  font-size:1.2rem;
}
body > article > img:first-child {
  display:block;
  margin:auto;
  padding-top:70px;
  width:940px;
}
article {
  text-align:center;
}
article > img {
  margin:8px;
  width:300px;
}
nav {
  text-align:center;
}
nav > section {
  background-color:#afafaf;
  display:inline-block;
  padding:0 20px;
  border-radius:10px;
}
nav > section > div {
  display:inline-block;
  width:130px;
}
nav > section > div > a {
  display:block;
  padding:20px;
}
nav > section > div:hover > a {
  color:white;
  background-color:black;
}

CSS ↑

 

꾸준히 연습하기.