1차 메뉴 바 만들기

HTML

 

<h1>1차메뉴</h1>

 

<div>  <- 나누는 이유 : 1차 메뉴는 가운데정렬 영향 받지 않도록 하기 위해서
  <section> <- 메뉴 한 덩어리 정리 
    <nav>

            <a href="#">Home</a> <-텍스트

    </nav> <-메뉴 하나 
    <nav><a href="#">Tutorials</a></nav>
    <nav><a href="#">Articles</a></nav>
    <nav><a href="#">inspiration</a></nav>
  </section>
</div>

 

CSS

 

a {
  color: black;
  text-decoration: none;
} <- a 노말라이즈
div {
  text-align: center;
}
div > section {
  display: inline-block;
  background-color: lightgray;
  border-radius: 10px;
  padding:0 20px;
}
div > section > nav {
  display: inline-block;
}
div > section > nav > a {
  padding: 20px;
  display: block;
}
div > section > nav:hover > a {
  color: white;
  background: black;
}