220825 - 반응형/적응형 웹 제작 (nike)

반응형 웹

• 이벤트 버블링 방지하기

• 1. event.stopPropagation()

    //햄버거 메뉴 
    $('.main-menu>li>a').click((event)=>{ //메인 메뉴 클릭 시 서브메뉴 왼쪽으로 슬라이드
        event.stopPropagation();  //이벤트 버블링 방지
        $(this).siblings('.sub-menu').animate({left:'0%'},'fast');
    });

    $('.all>a').click((event)=>{ //서브메뉴 클릭 시 오른쪽으로 슬라이드
        event.stopPropagation(); //
        $(this).parents('.sub-menu').animate({left:'150%'},'fast');
    });

    $('.menu-area').click(()=>{ //메뉴 배경 (화면 전체 덮음)
        $('.index-wrap').css('filter','blur(0px)');
        $('.h-top').animate({
            right:'-100%'
        },'fast',()=>{
            $('.menu-area').hide();
        });
    });

 

 

• 2. .has(even.target)

    $('.main-menu>li>a').click(function(){
        $(this).siblings('.sub-menu').animate({
            left:'0%'
        },'fast');
    });

    $('.all>a').click(function(){
        $(this).parents('.sub-menu').animate({left:'150%'},'fast');
    });

    $('.menu-area').click(function(event){ 
        console.log($(this).has(event.target)); //event.target : 이벤트 발생(ex.클릭)한 요소
        console.log($(this).has(event.target).length); //menu-area 내부에서 클릭된 요소 갯수
        if($(this).has(event.target).length==0){ //menu-area 내부 클릭된 요소 없으면 (왼쪽 배경 클릭 시)
            $('.index-wrap').css('filter','blur(0px)');
            $('body, html').css({height:'auto',overflow:'visible'}); //화면 고정 없앰
            $('.h-top').animate({
                right:'-100%'
            },'fast',()=>{
                $('.menu-area').hide(); //메뉴 숨기고 메인으로 돌아감
            });
        }
    });

 

 

 

//처음에 애니메이션이 작동 안 해서 당황했는데, es6인 화살표함수와 제이쿼리를 같이 사용하면서 에러난 거였다 별 생각 없이 화살표함수가 편하니 쓴 거였는데 앞으로 유의할 것

 

 

※ 제이쿼리에서 화살표 함수 쓰려면

$('h1').click(function(){
  $(this).addClass('reverse')
})

=>

$('h1').click{(event)=>{  //event 필수 대입
  $(event.currentTarget).addClass('reverse')  
})

 

 

 

 

적응형 웹

• 모바일 기기 자동 인식 => 모바일용 html 띄우기

• agent.js

let smartPhones=['iphone','ipod','ipad', 'opera mini', 'opera mobi', 
'nokia', 'android','webos','windows ce','blackberry','iemobile','sonyericssion'];

// alert(navigator.userAgent); //기종 검색

for (let i in smartPhones){
    if(navigator.userAgent.toLowerCase().match(new RegExp(smartPhones[i]))){ 
    //match: 문자열이 정규식과 일치하면 배열 리턴 / 일치하지 않으면 null 리턴
        document.location='http://주소/모바일용.html';
    }
}