2021-05-30

html 폴다운메뉴 만들기

 

HTML

 

주의점 ) 하나의 태그를 만들 때

자식선택자를 쓸 것

 

◎ 자식선택자 란 ? 

`>`를 뜻하며 선택자가 길면 우선 순위가 높다.

<!-- 하나의 태그를 만들 때 -->
<!-- nav.menu-1>ul>li*3{메뉴아이템$} -->
<nav class="menu-1">
  <ul>
    <li><a href="#">메뉴 아이템 1</a></li>
    <li><a href="#">메뉴 아이템 2</a></li>
    <li><a href="#">메뉴 아이템 3</a></li>
    <li><a href="#">메뉴 아이템 4</a></li>
  </ul>
</nav>

 

CSS

 

첫 문장에  노말라이즈 필수 

 

◎ 노말라이즈 란?

 

HTML의 요소의 기본 스타일을 브라우저 간 일관성을 유지하도록 돕는 CSS파일이다.

 

EX) margin:0 => 바깥쪽 여백 제거

padding:0 => 안쪽 여백 제거

 

 

 

 

 

 

body, ul, li {
  margin:0;
  padding:0;
  list-style:none;
}

a {
  color:inherit;
  text-decoration:none;
}

.menu-1 {
  margin-top:50px;
  text-align:center;
}

.menu-1 > ul {
  background-color:#dfdfdf;
  display:inline-block;
  padding:0 10px;
  border-radius:5px;
}

.menu-1 > ul > li {
  display:inline-block;
  width:200px;
}

.menu-1 > ul > li > a {
  display : block;
  padding : 10px;
}

.menu-1 > ul>li:hover>a {
  color:white;
  background-color:black;
}