📄 서울시청

제작기간	22.05.29 ~ 22.05.31 (3일 소요)
사용 언어	html, css, jquery
사용 플러그인	swiper
분류	pc, 클론코딩

✔ blind

💬 화면상에 보여지지 않지만 웹 접근성을 고려하면 꼭 필요한 요소들이 있을 때는 blind를 하게됩니다.

📌 웹 접근성을 고려하지 않는 blind

.blind {
	display: none;
}
.blind {
	visibility: hidden;
}

💬 위와 같이 display: none 이나 visibility: hidden은 화면에서는 보여지지 않지만 스크린 리더기로도 읽을 수가 없기 때문에 접근성에 어긋나게 됩니다.

📌 웹 접근성을 고려한 blind

.blind {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

💬 clip속성을 이용하기 위해서는 position: absolute, fixed일 때 가능하므로 position을 잡아준 후, width와 height가 0인 컨텐츠는 읽을 수 없으므로 최소 1px씩 주고 clip으로 잘라서 margin: -1px, overflow: hidden을 걸어주면 우리가 원하는 blind를 clip속성을 이용하여 간편하게 사용할 수 있습니다.

✔ Swiper

swiper란 ❔

다양한 프레임워크에서 이미지나 페이지의 슬라이딩 혹은 스와이핑을 역동적으로 사용할 수 있게 도와주는 널리 사용되는 슬라이더 플러그인 중의 하나입니다.

swiper의 장점 ❕

👉 최소한의 구성으로 네비게이션 구현이 가능하여 간편합니다.
👉 Swiping 기능이 내재되어 있어 반응형 사이트에서 사용하기 좋습니다.
👉 Fade-Effect, 3D CSS Styling까지 가능하여 높은 확장성을 가지고 있습니다.

🖊 서울시청 메인슬라이드

var slide_news_swiper = new Swiper(".slide-news", {
    loop: true,
    allowTouchMove : false,
    autoplay: {
        delay : 2500,
        speed : 500,
        disableOnInteraction: false,
    },
    pagination: {
        el: ".swiper-pagination",
        type: "fraction",
    },
    navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
    },
});

💬 서울시청 메인슬라이드는 pagination과 navigation이 포함되어 있어서 적절한 swiper demo를 찾아 가져왔습니다.

• 부가 옵션
  • loop : true // 슬라이드가 무한으로 재생
  • allowTouchMove : false // 마우스 드래그가 가능하도록 기본 설정이 되어 있지만 false로 적용하여 드래그를 방지
  • autoPlay : 자동재생 옵션
    - delay : 2500 // 2.5초 후에 다음 슬라이드 진행
    - speed : 500 // 0.5초의 속도로 슬라이드 진행
    - disableOnInteraction : 스와이프 후 자동재생이 비활성화 되지 않음
    
    

🖊 탭 메뉴 클릭 이벤트

$('.tab-menu').click(function (e) {});

💬 서울시청 메인슬라이드에서는 탭 메뉴가 주요뉴스와 시민참여 총 2개의 탭이 있었습니다.

📌 active 클래스 추가/제거

$('.tab-menu.active, .mainSlide.active').removeClass('active');
$(this).addClass('active').siblings('.mainSlide').addClass('active');

💬 탭 버튼을 누르게 되면 활성화 된 탭 메뉴와 해당하는 슬라이드의 active 클래스를 제거하여 display:none으로 바꿔주고 클릭한 메뉴와 해당 슬라이드에 active 클래스를 추가하였습니다

📌 조건문) 활성화 된 슬라이드만 autoplay

if ($(this).parent().hasClass('menu-news')) {
	slide_news_swiper.autoplay.start();
    slide_part_swiper.autoplay.stop();
} else {
    slide_part_swiper.autoplay.start();
    slide_news_swiper.autoplay.stop();
}
// slide_news_swiper // 쥬요뉴스 슬라이드
// slide_part_swiper // 시민참여 슬라이드

💬 단, 활성화 된 슬라이드가 화면에 보여질 때, 활성화가 되지 않은 슬라이드의 자동재생이 멈춰야 하기 때문에 조건문을 걸어줍니다.


💬 탭 버튼 부모의 클래스가 menu-news(주요뉴스)라면 주요뉴스 슬라이드는 .autoplay.start(), 시민참여 슬라이드는 autoplay.stop(), else에서는 반대로 걸어줍니다.

📌 조건문) 슬라이드 정지버튼 활성화 된 상태일 때 제외

if ($(this).siblings().find('.button-control').hasClass('stop')) {
	slide_news_swiper.autoplay.stop();
} else {
	slide_news_swiper.autoplay.start();
}
slide_part_swiper.autoplay.stop();

💬 재생/정지버튼에서 정지버튼이 눌러져있는 상태에서는 탭 버튼을 눌러도 재생이 되면 안되기 때문에 여기서도 조건문을 걸어줍니다.

➕ 배너 슬라이드 💬 페이지 하단에 있는 배너 슬라이드도 같은 방식으로 제작하였습니다

🔘 최종코드

$('.tab-menu').click(function (e) {
    e.preventDefault();
    $('.tab-menu.active, .mainSlide.active').removeClass('active')
    $(this).addClass('active').siblings('.mainSlide').addClass('active');
    if ($(this).parent().hasClass('menu-news')) {
        if ($(this).siblings().find('.button-control').hasClass('stop')) {
            slide_news_swiper.autoplay.stop();
        }else {
            slide_news_swiper.autoplay.start();
        }
        slide_part_swiper.autoplay.stop();
    } else {
        if ($(this).siblings().find('.button-control').hasClass('stop')) {
            slide_part_swiper.autoplay.stop();
        }else {
            slide_part_swiper.autoplay.start();
        }
        slide_news_swiper.autoplay.stop();
    }
});

🖊 슬라이드 mouseover/mouseout

📌 mouseover

$('.mainSlide').mouseover(function(){
  slide_news_swiper.autoplay.stop();
  slide_part_swiper.autoplay.stop();
}); 

💬 mouseover일 시 슬라이드 정지

📌 mouseout

$('.mainSlide').mouseout(function(){
    if($(this).parent().hasClass('menu-news')) {
        if($(this).find('.button-control').hasClass('stop')) {
            slide_news_swiper.autoplay.stop();
        } else {
            slide_news_swiper.autoplay.start();
        }
    } else {
        if($(this).find('.button-control').hasClass('stop')) {
            slide_part_swiper.autoplay.stop();
        } else {
            slide_part_swiper.autoplay.start();
        }
    }
});   

💬 탭 메뉴 이벤트와 비슷하게 마우스가 슬라이드 밖을 벗어나면 autoplay가 다시 활성화 되지만 정지버튼이 눌렀을 때는 제외해야 합니다.

✔ 키보드 이벤트 - keydown

💬 키보드 이벤트 객체에는 눌리거나 놓아진 키에 다양한 메타정보다 담겨 있습니다. key속성에는 키 값이, code속성에는 코드 값이, shiftKey속성에는 쉬프트키가 함께 눌렸는지에 대한 여부가 저장됩니다.

💬 keydown 이벤트는 여러가지 키보드 이벤트 중 하나로, 사용자가 키를 누를 때 발생하는 이벤트입니다.
◾ 사용자가 키를 뗄 때 발생하는 keyup 이벤트도 있습니다.

📌 슬라이드가 열려있을 때 첫/마지막 요소에서 shift+tab/tab 눌렀을 때 슬라이드 닫기

$('.bottom-menu-area .submenu-list:first-child .link-submenu').keydown(function(e){
    var keyCode = e.keycode || e.which;
    if (keyCode == 9 && e.shiftKey) {
        $('.submenu-wrap').stop().slideUp();
    }
})
$('.bottom-menu-area .submenu-list:last-child .link-submenu').keydown(function(e){
    var keyCode = e.keycode || e.which;
    if (keyCode == 9 && !e.shiftKey) {
        $('.submenu-wrap').stop().slideUp();
    }
})

💬 누른 키보드의 키의 유니코드 값을 변수 keyCode에 넣어주고,
tab은 유니코드 값이 9이므로 마지막 요소에서 keyCode == 9인 동시에 shift 눌렀는지에 유무도 고려하여 e.shiftKey까지 조건을 걸어서 .slideUp()을 걸어줍니다.

✔ btn-top

  $('.btn-top').click(function(e){
      e.preventDefault();
      $('html, body').animate({
          scrollTop: 0
      }, 300);
      $('.submenu-wrap').stop().slideUp();
      $('.bottom-menu-area .menu-list').removeClass('active');
  })

💬 animate를 이용하여 scrollTop: 0으로 조정하여 위로 부드럽게 움직이면서 열려있던 슬라이드는 닫히게 하고 활성화 클래스인 active도 삭제해서 초기 상태로 되돌렸습니다.