TIL(2022.05.11)- 메뉴 만들기

메뉴를 만들고, 메뉴에 hover 됐을 때의 스타일 적용까지 배워보았다.

• depth1에 depth2가 들은 구조
  (ul, li 구조를 중첩으로 만들려면 ul 밑에 자식으로는 꼭 li가 와야 되지만, li 하위 요소로는 어느 것이든 와도 상관 없다.)

<div class="header">
    <ul class="gnb cf">
      <li class="depth1" >
        <a href="javascript:void(0)">회사소개</a>
        <ul class="depth2" >
          <li><a href="javascript:void(0)">회사개요</a></li>
          <li><a href="javascript:void(0)">CEO인사말</a></li>
          <li><a href="javascript:void(0)">회사연혁</a></li>
          <li><a href="javascript:void(0)">특허/인증 현황</a></li>
          <li><a href="javascript:void(0)">찾아오시는 길</a></li>
        </ul>
      </li>
      <li class="depth1">
        <a href="javascript:void(0)">제품소개</a>
        <ul class="depth2" >
          <li><a href="javascript:void(0)">신제품</a></li>
          <li><a href="javascript:void(0)">선풍기</a></li>
          <li><a href="javascript:void(0)">여름가전</a></li>
          <li><a href="javascript:void(0)">가을가전</a></li>
          <li><a href="javascript:void(0)">주방가전</a></li>
          <li><a href="javascript:void(0)">생활가전</a></li>
          <li><a href="javascript:void(0)">환경가전</a></li>
        </ul>
      </li>
      <li class="depth1">
        <a href="javascript:void(0)">홍보센터</a>
        <ul class="depth2" >
          <li><a href="javascript:void(0)">공지사항</a></li>
          <li><a href="javascript:void(0)">언론보도</a></li>
          <li><a href="javascript:void(0)">카탈로그</a></li>
          <li><a href="javascript:void(0)">홍보활동</a></li>
        </ul>
      </li>
      <li class="depth1">
        <a href="javascript:void(0)">고객지원</a>
        <ul class="depth2" >
          <li><a href="javascript:void(0)">자주묻는질문</a></li>
          <li><a href="javascript:void(0)">온라인문의</a></li>
          <li><a href="javascript:void(0)">서비스센터</a></li>
          <li><a href="javascript:void(0)">제품설명서</a></li>
        </ul>
      </li>
    </ul>
  </div>

header {
  width: 1200px;
  margin: 16px auto;

}

.header .gnb {
  display: flex;
  justify-content: space-around;
}

.header .gnb .depth1 {
  position: relative;
}

.header .gnb .depth1 > a {
  font-size: 36px;
  font-weight: 700;
  display: block;
  padding: 8px;
}

.header .gnb .depth1:hover > a {
  color: red;
}

.header .gnb .depth1:hover .depth2 > li {
  display: block;
}

.header .gnb .depth2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* display: none; */
  position: absolute;
  background-color: #fff;
  width: 100%;
  margin-top: 8px;
}

.header .gnb .depth2 li {
  width: 100%;
  padding: 8px 0;
  text-align: center;
  font-size: 20px;
  color: #6F6F6F;
  display: none;
}

.header .gnb .depth2 li:hover {
  color: blue;
  background-color: #ccc;
}

main .img-box {
  background-color: yellow;
  width: 100%;
  height: 300px;
}

• ::after를 이용해서 메뉴에 효과 주는 방법

.header .gnb .depth1::after {
  content: "";
  display: block;
  background-color: #000;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  
  width: 50px;
  height: 2px;
}

상단에 메뉴를 만들 기회가 적어서 그런지 메뉴 만드는 게 어렵다.
더군다나 메뉴도 다 똑같은 형태가 아니고 다양해서 그런지 더 어렵다...ㅎ