BMX 메뉴 만들기

HTML

 

<!-- section>nav*7>a[href="#"]{메뉴아이템 $} -->
<!-- section>({|}+nav>a[href="#"]{메뉴아이템 $})*7+{|} -->

 

CSS

 

a {
  text-decoration:none;
  color:black;
  /* color:inherit; 해도 됩니다. */
}

div {
  text-align:center;
}

div > a {
  font-size:5rem;
  font-weight:bold;
  text-transform:uppercase;
  letter-spacing:-10px;
}

/* section를 목록(list)이라고 보시면 됩니다. */
section {
  display:block;
  text-align:center;
  font-weight:bold;
}

/* section > nav를 항목(list-item)이라고 보시면 됩니다. */
section > nav {
  display:inline-block;
  width:120px;
}

/* section > nav > a를 항목 텍스트라고 보시면 됩니다. */
section > nav > a {
  /* 이렇게 해야 버튼에 빈 공백이 생기지 않는다. */
  display:block;
}

section > nav:hover > a {
  color:red;
}