웹2 9일차

[absolute요소 hover]

1. absolute 요소 안 보이게 하기

hover 적용하는 2차 메뉴 구현시, display: none; 사용하면 transition을 사용할 수 없다.

대신, opacity: 0;과 visibility: hidden;을 동시에 써주어서 사라지게 할 수 있다. 

 

opacity: 0;                => 투명도 0%, 그러나 상호작용(ex.클릭)이 된다. 

visibility: hidden;  => 상호작용이 되지 않는다.

                                            But, 공간은 그대로 차지하기 때문에 absolute 혹은 fixed 요소에만

                                           사용하는 방법이다. 

 

 css
     /* hover */
     /* left-box의 자식인 left-nav에 마우스를 올리면 
     자식인 menu-2-section에 코드 적용 */ 
    .left-box > .left-nav:hover > .menu-2-section {
      opacity: 1; visibility: visible;
    }
 
 
 html
    <nav class="left-nav">
      <ul>
        <li><a href="#">list-1</a></li>
        <li><a href="#">list-2</a></li>
        <li><a href="#">list-3</a></li>
        <li><a href="#">list-4</a></li>
      </ul>
      <!-- ---- 2차메뉴 ---- -->
      <div class="menu-2-section">
        ...(줄임)
      </div>
    </nav>

 

 

2. 변형과 애니메이션

[변형 속성 transform ]

transform: traslateY(20px);

 

[변형 속성값 translate ]

속성 transform의 속성값으로 X, Y축 값

 

[변형 시간 조정 속성 transition ]

변형이 속성값의 시간동안 진행된다. 

transition: 0.3s;

 

[변형과 애니메이션]

★특정 조건에만 transition을 사용하면 특정조건이 일어났을 때만 애니메이션이 작동되기 때문에 모든 조건에서 일어날 수 있도록 조건이 걸리지 않은 선택자에 transition을 적용해야 한다.