웹3 1일차

{**Tip**}

지디웹 원하는 사이트 모작하기

=> 레이아웃 나눠서 순서대로 만드는 연습하기

 

 

 

---

 

 

[지마켓 3차 메뉴 만들기]

1. 2차메뉴에서 시작

 

2. 레이어 잡기 - 1

크기가 큰 레이어 부터 순서대로 한다. 처음 레이어는 가장 바깥쪽의 박스들 부터.

 

3. 레이어 잡기 - 2

큰 박스들 안에 있는 작은 요소들 구성

 

4. hover 적용

3차 메뉴 사이드바에 마우스 올리면 나타나도록 hover 적용.

 

1) .g-market-3__nav { position: absolute; 적용 }

    마우스를 올릴 li요소가 감싸주도록 위치를 옮긴다. 

<!-- 수정 전 -->
  <div class="container">
    <div class="g-market-2__nav">
    ..
    ..
    </div>
    <div class="g-market-3__nav">
    ..
    ..
    </div>
  </div>


<!-- 수정 후 -->
  <div class="container">
    <div class="g-market-2__nav">
      <ul>
        <li>
          <a href="#">브랜드 패션</a>
          <div class="g-market-3__nav">
            3차메뉴1
          </div>
        </li>
        <li>
          <a href="#">패션의류.잡화.뷰티</a>
          <div class="g-market-3__nav">
            3차메뉴2
          </div>
        </li>
        ..
        ..
      </ul>
    </div>
  </div>

 

2) 기준이 되어줄 .container { position: relative; 적용 }

    3차 메뉴의 실질적 부모 요소가 된다. 

 

3) .g-market-3__nav { 위치 고정, 모습 숨김, hover전의 형태 }

    top: 0; right: 0;으로 위치 고정.

    opacity: 0; visibility: 0;로 숨김.

    height: 0;으로 hover전의 형태를 만들어 준다. 

 

3) li:hover > .g-market-3__nav { 마우스 올릴 때 모습 보임, 애니메이션&부드러운 모션 }

   opacity: 1; visibility: visible;로 모습 드러냄.

   height: 400px;로 원래 형태 복원.

   trasition: 0.3s~0.7s; 높이가 변화하는 시간을 적용하여 나타날 때 부드러운 모션을 만들어준다. 

   + ) 사라지는 모습도 부드러운 모션을 만들어 주고 싶다면,

        안 보일때의 형태인 .g-market-3__nav의 css에 trasition속성을 추가한다.