📂서울특별시청 클론 코딩

• 사이트명: 서울특별시 - 동행 매력 특별시 서울
• 사용언어: HTML5, CSS3, js
• 라이브러리: Swiper, jquery ,jquery-cookie
• 유형: PC 적응형
• 💻 https://hyesukhan.github.io/230912_work1/

✅ Check Point

✔ 자바스크립트 새창 열기
✔ 탭버튼으로 메인비주얼 슬라이드 컨트롤하기
✔ 슬라이드 data값을 넣고 배열로 처리해서 한번에 컨트롤하기
✔ 오늘하루 보지않기 구현
✔ 키보드 이벤트

---

1. 자바 스크립트 새창 열기

javascript

window.open(url, name, option);
window.open('팝업주소', '팝업창이름', '팝업창옵션');

url은 이동할 팝업의 주소를 넣고
name은 새로운 창의 속성 또는 창의 위치를 지정합니다.

option

• target="_blank" : 팝업을 새창에서 엽니다. target을 설정하지 않을 경우 default로 설정됩니다.
• target="_parent" : 부모창에서 팝업이 열립니다.
• target="_self" : 현재 페이지에서 팝업이 열립니다.
• target="_top" : 현재 페이지에서의 최상의 페이지에서 팝업이 열립니다.

2. 탭버튼으로 메인비주얼 슬라이드 컨트롤

jquery

$('.sc-visual .headline-area').click(function(){
        $('.sc-visual .headline-area').removeClass('on');
        $(this).addClass('on');
        $(this).parent().addClass('on').siblings().removeClass('on');
})

탭 버튼 영역을 클릭하면 클릭한 탭버튼 영역에 on이 들어가고 클릭한 부분 전체 슬라이드 영역에 on을 준다.
on이 들어간 탭버튼 영역을 css로 꾸미고 on이 들어간 슬라이드 영역의 zindex를 올려서 겹쳐진 영역에서 선택된 부분이 보이도록 한다.

$('.sc-visual .headline-area').click(function(){
        if($(this).parent().hasClass('slide-content2')){ //슬라이드 2번이면
            mainSlide1.autoplay.stop();                    
            if($(this).parent().find('.autoplay').hasClass('on')){
                mainSlide2.autoplay.stop();
            }else{
                mainSlide2.autoplay.start();
            }
            
        }else{                                           //슬라이드 1번이면
            mainSlide2.autoplay.stop();
            if($(this).parent().find('.autoplay').hasClass('on')){
                mainSlide1.autoplay.stop();
            }else{
                mainSlide1.autoplay.start();
            }
        }
  })

누른 탭버튼이 슬라이드 2번이라면 슬라이드 1번은 정지시키고, 자동재생여부에 따라서 슬라이드 2번을 재생시킨다.
슬라이드 1번도 동일한 코드로 작성한다.

3. 슬라이드 배열로 처리해서 한번에 컨트롤하기

jqeury

    slideArr = [mainSlide1,mainSlide2,mainSlide3]
    $('.swiper .autoplay').click(function(){

        $(this).toggleClass('on');
        idx=$(this).data('slide');
        if($(this).hasClass('on')){
            slideArr[idx].autoplay.stop();
        }else{
            slideArr[idx].autoplay.start();
        }
    })

html

.swiper .autoplay버튼에 data-slide값을 0,1,2,로 부여한다.

slideArr배열에 슬라이드들을 담고 autoplay버튼을 클릭했을 때, data값을 받아온다.
받아온 데이터 값으로 현재 슬라이드를 판별하고 on이면 autoplay를 멈춘다.

4. 오늘하루 보지않기 구현

jqeury , javascript

$(function(){
	$layerPopup = document.querySelector('.top-banner');
    $btnLayerPopupClose = document.querySelector('.top-banner .btn-close');
    $btnLayerPopupTodayHide = document.getElementById('today-del-checkbox');


    if(!$.cookie('testCookie')){
        layerPopupShow();
    }

    $btnLayerPopupClose.addEventListener('click',function(){
        
     
        if($btnLayerPopupTodayHide.checked){
            layerPopupHide(1);
        }else{
            layerPopupHide(0);
        }
    })

    function layerPopupShow(){
        $layerPopup.style.display = 'block';
    }

    function layerPopupHide(state){
        $layerPopup.style.display = 'none'

        if(state === 1){
            if($.cookie('testCookie') == undefined){
                $.cookie('testCookie', 'Y', { expires: 1, path: '/' });
            }
        }
    }

})

testCookie가(쿠키) 생성되어 있지 않으면 layerPopupShow가 동작하여 layerPopupdms display blockd이 되어 보이게 되고 .top-banner .btn-close를 클릭할 때마다 today-del-checkbox가 체크되어있는지 확인하고 체크되어있다면 layerPopupHide(1)을 실행하여 쿠키를 생성하고 아니라면 그대로 팝업을 닫아줍니다.

5.키보드 이벤트

javascript

  $('.navigation .navi-item-2dept:first-child a').keydown(function(e){
        if(e.keyCode === 9 && e.shiftKey){
            $('.navigation .btn-navi').removeClass('on').siblings('.sub').slideUp();
        }
    })

    $('.navigation .navi-item-2dept:last-child a').keydown(function(e){
        if(e.keyCode === 9 && !e.shiftKey){
            $('.navigation .btn-navi').removeClass('on').siblings('.sub').slideUp();
        }
    })

[shift]+[tab]을 눌렀을 경우와 마지막 메뉴에서 tab을 눌렀을 경우 Tab메뉴가 닫히도록 만들었습니다.