javascript(21.3.26)

1. onmouseover : 해당 객체의 영역위에 커서가 진입하는 순간 발생

 2. onmouseout  : 해당 영역에서 커서가 빠져나가는 순간 발생

 3. onmousedown : 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생

 4. onmouseup   : 해당 객체의 영역에서 마우스 버튼이 떼는 순간 발생

 5. onmousemove : 해당 객체의 영여겡서 커서가 움직이는 순간 발생 

 

* label for 값과 input의 id 값을 같게 해주면 '아이디' 부분을 누를시 텍스트로 커서가 옮겨지게 된다.

  <label for="id">아이디:</label>

    <input type="text" id="id">

 

*clear: both; 를 쓰면 상위 엘리먼트가 float:left를 주더라도 이 친구는 영향을 받지 않는다.

*animation 효과를 주는 코드

animation : 임의변수 시간;

@keyframes 임의 변수 

어디서 어디로 움직일지 from , to를 설정해주면 된다.

#header>.navi{
    animation: slider 0.5s;
    animation-fill-mode: forwards;}
@keyframes slider{
    from{height: 1px;}to{
        height:150px;}}

 

*onmouseover,onmouseout 을 이용하여 마우스가 올라가면 네비게이션바가 나오고 마우스가 나가면 네비게이션바 가 다시 닫히는 걸 구현 해봤다. overflow:hidden 을 이용해서 평상시는 가려져 있다가 마우스가 다가가면 다시 나오게 하는 것이다.

 

* 최대한 코드를 간편하게 하기위해서 css를 하나 만들어 놓고  class'navi' 에 애니메이션 효과를 주고 

마우스가 올라가면 class가 바뀌어 효과가 나타나고 마우스가 나가면 class가 다시 바껴 효과가 없어져 사라지도록 만들어 봣다.

 function snb(){ list=document.querySelector('.snb_area')
           list.setAttribute('class', 'snb_area navi');}
       function snb2(){ list=document.querySelector('.snb_area')
           list.setAttribute('class', 'snb_area');}

*이건 if문을 활용하여 만든 코드인데 경일아카데미 퀵메뉴 애니메이션을 주기위해서  누르는 버튼과 옆에 메뉴가 다른 이미지 이기때문에 메뉴에 명령을 주고 버튼에 따로 명령을 주었다. 또 움직이는게 다르기 때문에 애니메이션 효과도 총 4개를 만들어 넣어주었다. 메뉴에 나오고 들어가도 버튼에 나오고 들어가고.

이걸 div로 묶어서 같이 효과를 주어 주면 간편할거 같아서 시도 해보았으나 계속 에러가 나서 이유를 찾아보았다. 

일단 효과를 주기위해서 position 을 줘야 한다. 다른 이유는 모르겠지만 실패해서 다른 이유를 찾아봐야 겠다.

function moving() {
                    why = document.querySelector('#quick_menu');
                    if (why.className == 'tick') {
                    why.setAttribute('class', 'tock');
                    } else  why.setAttribute('class', 'tick');}
                    what = document.querySelector('#hey');
                    if (what.className == 'naya') {
                        what.setAttribute('class', 'nayana');
                    } else {what.setAttribute('class','naya');}
                    }

.tick{animation: move 0.5s;
    animation-fill-mode: forwards;
}
@keyframes move{
    from{ width: 0;}
    to{width: 85px;}
}
.tock{animation: moving 0.5s;
    animation-fill-mode: forwards;}
@keyframes moving{
    from{width: 85px;}
    to{width: 0;}
}
.naya{ animation: namove 0.5s;
    animation-fill-mode: forwards;
}
@keyframes namove{
    from{right: 0;}
    to{right: 85px;}
}
.nayana{animation: namoveing 0.5s;
    animation-fill-mode: forwards;
}
@keyframes namoveing{
    from{ right: 85px;} 
    to{ right: 0;}
}

 

*position;absolute를 줄때 줌인 줌아웃 할때 안움직이게 하기 위해서는 상위 엘리먼트에 포지션을 정해줘야 한다. 

상위엘리먼트에 relative 을 주면 줌인 아웃 할때 안움직인다.