0413.Lecture

drop menu

array

코드 줄이는 << important

navigation

html간단하게 

animation안에 animation

 

display: flex;

     justify-content:

          space-between;

 

 

vw/vh

 

> vw: view width / vh: view height

> view == whole browers size

> 약간 %같은 느낌? 1당 1% : ex) 90vh = 높이 기준으로 90%;

 

<< %는 크기가 but 바뀜 vw/h는 축소를 해도 그대로 유지 

<< 화면이 늘어나도 고정

 

 

layout popup

 

 

삼항연산자

 

 

DOMContentLoaded

window.addEventListener('DOMContentLoaded',init);

window 객체 << 최상위 객체: 다 있음

여기에 eventlistener로 모든 내용이 다 loaded된다음 실행하라는 명령을 준다. 이게 DOMContentLoaded.

 

 

addEventListner

Element.addEventListener() >>element에는 addEventListener라는 메소드가 존재한다

addEventListner에는 두가지 인자값이 있다. (eventName:as string , callback function(): 콜백함수)

 

배열 반복문 (forEach)

traditional way = 

        for(let i=0; i <headerGnb.length; i++){
            console.log(i, headerGnb[i]);
        }

forEach를 사용하면

headerGnb.forEach(forFn); //callback function

        function forFn(value,index){
            console.log(index,value);
        }

forEach문을 사용해서 callback function을 사용해준다.

callback function에서 인자값은 순서대로 배열의 value값, 배열의 index값을 가지고 온다.

 

Target (eventname.taget/currentTarget): 에는 두종류가 있는데 target 과 currentTarget 이다. target은 자식요소를 리턴하고 currentTarget은 부모요소를 리턴한다. 

차이점을 보고싶어서 아래 menuover/menuout 함수에 currentTarget을 target으로 바꾸고 console로 찍어봤는데 차이점이 크게 없어서 정확히 뭐가 다를까.,,,

        function init(){
            let headerGnb = document.querySelectorAll('.header_gnb >li');

            //반복문 forEach : 배열을 반복할때 
            headerGnb.forEach(forFn); // array.forEach(callback:function);
            
            //익명함수 : 함수 이름이 없음: anonymous function
            headerGnb.forEach(function(element){
                element.addEventListener('mouseenter',menuover);
                element.addEventListener('mouseleave',menuout);

            }); // 모든 value값에 mouseevent와 method를 등록해줌

        }
        
        function menuover(event){
            let snb = event.currentTarget.querySelector('.snb');
            snb.classList.add('on');
        }

        function menuout(event){
            let snb = event.currentTarget.querySelector('.snb');
            snb.classList.remove('on');
        }

 

 

위에 함수를

        function init(){
            let headerGnb = document.querySelectorAll('.header_gnb >li');

            //익명함수 : 함수 이름이 없음: anonymous function
            headerGnb.forEach(function(element){
            
                element.addEventListener('mouseenter',menu);
                element.addEventListener('mouseleave',menu);
                
            }); // 모든 value값에 mouseevent와 method를 등록해줌
            
        }

        function menu(event){
            
            let snbAll = document.querySelectorAll('.snb');
            
            snbAll.forEach(function(ele){
                if(event.type == 'mouseevent'){  //type = 어떤 method가 실행된건지 여기선 mouseenter과 mouseleave를 구분하기 위해서
                    ele.classList.add('on');
                }else{
                    ele.classList.remove('on');
                }
            })
        }

 

classList.add/remove

 

재귀함수

원하는 값이 나올때 까지 특정함수 안에서 함수를 실행하는 방법