HTML, CSS #6

1. ul, li

ul과 li는 메뉴들을 구성하는 태그라고 생각하면 돼. 사진과 코드로 보여줄게!

<!-- ul의 역할 : li의 부모 -->
<ul>
  <!-- li의 역할 : 항목을 표현 -->
  <li>동물</li>
  <li>식물</li>
  <li>광물</li>
</ul>

2. 메뉴 만들기

이제 지금까지 배웠던걸로 간단한 메뉴를 구성해볼거야!! 할 수 있지? 예??

예시

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

/* 노말라이즈 */
body, ul, li {

  list-style:none;
  padding:0;
  margin:0;
}

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

/* 커스텀 */

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

.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 {
  background-color:black;
  color:white;
}

• 먼저 우리가 배운 노말라이즈로 a와 body, ul, li을 기본값으로 세팅해주자!!

• 그리고 menu-1이라고 class로 명시 해줬으니까 .menu-1로 해서 중앙으로 옮겨주고 margin top으로 상단이랑 간격을 좀 띄워.

• 그리고 ul이 메뉴 아이템 1이라고 적혀있는 거의 상위니까 ul에 배경색이랑 inline, padding, border를 먹여주면 저 형상이 띄워질거야.

• 그리고 메뉴 아이템 1이라고 적혀져 있는게 li라는 태그에 inline-block을 줘서 옆으로 정렬하도록 만들고

• a 태그는 기본값이 inline-block이니까 block으로 주면 두번 째 사진처럼 검은색바탕만큼의 크기가 되고 li:hover>a를 하면 메뉴 아이템에 마우스를 올릴 때 마다 배경색과 글자 색이 바뀌어 사용자가 클리하는 느낌을 줄 수 가 있어.