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;
}