서울시청

최인영·2022년 12월 20일

portfolio

서울시청 클론코딩

사이트명: 서울시청
제작기간: 2.5일
사용언어: HTML, CSS, Jquery
분류: PC, 클론코딩

✔️ Main Point

script(jquery)

✏️ Project Review

~ 2022년도 프로젝트 작업 시 문제점

유지보수 어려운 빈번한 nth-child 사용

보완사항

유지보수 좋은 각각의 클래스 지정 후 작업

셀렉트 박스

<div class="lang-area">
	<label for="langList" class="blind">언어 선택</label>
	<select id="langList" name="">
		<option value="https://english.seoul.go.kr/?SSid=101_01">ENGLISH</option>
		<option value="https://japanese.seoul.go.kr/?SSid=101_02">日本語</option>
		<option value="https://chinese.seoul.go.kr/?SSid=101_04">简体中文</option>
		<option value="http://tchinese.seoul.go.kr/?SSid=101_03">繁體中文</option>
		<option value="https://world.seoul.go.kr/">WorldWide</option>
	</select>
	<button class="link-go" id="langBtn">GO</button>
</div>

url변수에 선택된 옵션의 value값을 저장,
go버튼을 누를 시 선택된 주소로 화면을 띄어준다.

$('#langBtn').click(function () { 
  url = $('#langList').val(); /*선택에 대한 값 지정*/
  window.open(url);
});

탭 전환 시 슬라이드 처음부터 다시시작

❗️ 두 슬라이드 영역이 동시에 재생이 되어 탭 전환 시에도 이미 슬라이드 재생이 되어서 처음부터 볼 수 없고, 같은 탭을 반복하여 누를 때마다 슬라이드 초기화 되는 문제점.

1. slideTo(0) 함수를 이용하여 첫번째 슬라이드 실행.
(mySwiper.slideTo(index, speed, runCallbacks);)
2. slideFlag를 지정 후 조건을 추가하여 반복 슬라이드 초기화를 방지

  /*초기화값*/
  slideFlag1 = 0;
  slideFlag2 = 1;

  $('.sc-visual h3').click(function (e) {
    e.preventDefault();
    $(this).parent().addClass('active').siblings('.slide').removeClass('active'); /*각 슬라이드 구분하며 active 생성*/
    if ($(this).parent().hasClass('slide1')) { /*첫번째 slide1을 선택했다면*/
      if (slideFlag1 == 1) { /* 2. 조건추가 - 두번눌렀을때 다시 초기화 안되게 -*/
        slide1.autoplay.start(); /*첫번째 slide1 자동 실행*/
        slide2.autoplay.stop(); /*첫번째 슬라이드 실행함으로써 두번째 slide2 멈춤*/
        slide2.slideTo(0); /*첫번째 슬라이드 실행함으로써 두번째 slide2 스와이퍼 초기화*/
        slideFlag1 = 0;
        $('.sc-visual .autoplay').removeClass('active');
      }
      slideFlag2 = 1;
    } else {
      if (slideFlag2 == 1) {
        slide2.autoplay.start(); /*두번째 slide2 자동 실행*/
        slide1.autoplay.stop(); /*두번째 슬라이드 실행함으로써 첫번째 slide1 멈춤*/
        slide1.slideTo(0); /*두번째 슬라이드 실행함으로써 첫번째 slide1 스와이퍼 초기화*/
        slideFlag2 = 0;
        $('.sc-visual .autoplay').removeClass('active');
      }
      slideFlag1 = 1;
    }
  })


 
    
  /*첫번째 슬라이드*/
  var slide1 = new Swiper(".slide1 .swiper", {
    observer: true,
    observeParents: true,
    pagination: {
      el: ".fraction",
      type: "fraction",
    },
    navigation: {
      nextEl: ".next",
      prevEl: ".prev",
    },
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
  });
  
  
  /*두번째 슬라이드*/
  var slide2 = new Swiper(".slide2 .swiper", {
    observer: true,
    observeParents: true,
    pagination: {
      el: ".fraction",
      type: "fraction",
    },
    navigation: {
      nextEl: ".next",
      prevEl: ".prev",
    },
    autoplay: {
      delay: 4000,
      disableOnInteraction: false,
    },
  });
  slide2.autoplay.stop();

  $('.slide1 .autoplay').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('paused')) { //paused가 있으면
      $(this).removeClass('paused') //paused를 제거하고,
      slide1.autoplay.start(); //slide1을 자동 재생한다.
    } else { //paused가 없으면
      $(this).addClass('paused') //paused를 추가하고,
      slide1.autoplay.stop(); //slide1을 정지한다.
    }
  });

  $('.slide2 .autoplay').click(function (e) {
    e.preventDefault();
    if ($(this).hasClass('paused')) {
      slide2.autoplay.start();
      $(this).removeClass('paused')
    } else {
      $(this).addClass('paused')
      slide2.autoplay.stop();
    }
  });

서브메뉴 열고 닫기

❗️ 탭으로 서브메뉴를 빠져나올 때 닫히지 않고 바로 넘어가는 부분을 작업 시 간과하고 있었다.

1. slideTo(0) 함수를 이용하여 첫번째 슬라이드 실행.
(mySwiper.slideTo(index, speed, runCallbacks);)
2. slideFlag를 지정 후 조건을 추가하여 반복 슬라이드 초기화를 방지

    $('.sc-related .related').click(function (e) { 
        if($(this).siblings('.related-area').length > 0){ /*length는 태그의 길이 = .related-area라는 태그가 있을 때*/
            e.preventDefault();
            if($(this).hasClass('active')){ /*열려진 상태에서 한번더 누를때 닫혀져야함*/
                $('.related-area').stop().slideUp();
                $('.sc-related .related').removeClass('active')
            }else{
                $('.related-area').stop().slideUp(); /*전체가 닫히고 열릴려면 .active가 없을 때 슬라이드 다 닫힘*/
                $('.sc-related .related').removeClass('active') /*전체가 닫히고 열릴려면 .active가 없을 때 active 제거*/
                $(this).siblings('.related-area').stop().slideDown(); /*닫혀진 상태에서 누를때 열림*/
                $(this).addClass('active') /*닫혀진 상태에서 누를때 .active 추가*/
            }
        }
    });

키보드 이벤트(keydown)

❗️ 탭으로 서브메뉴를 빠져나올 때 닫히지 않고 바로 넘어가는 부분을
작업 시 간과하고 있었다. 키다운 이벤트를 이용해 tab의 고유의 키번호와 shift키를 이용해
서브메뉴 첫번째에서 쉬프트탭을 누르면 슬라이드가 닫히게 되며,
서브메뉴 마지막에서는 탭을 할 경우 슬라이드가 닫히게 작업이 가능해졌다.

키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생한다.
키를 누를 때는 keydown 타입의 이벤트가 발생하고,
키를 놓을 때는 keyup 타입의 이벤트가 발생

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

//탭을 누르고 가장 첫번째 탭 이전으로 가면(shift+tab) .related-area 닫기*/
/**
* keydown: 키보드를 누를 때 실행. 키를 누르고 있을 때 단 한번만 실행
* keypress: 키보드를 누를 때 실행. 키를 누르고 있을 때 계속 실행
* keyup: 누른 키에서 손을 뗄 때 실행
* 
*/
 $('.related-area .sub-item:first-child').keydown(function (e) { /*첫번째 sub-item에*/
      /*console.log(e.keyCode);*/ /*탭키는 9번*/
        key = e.keyCode;
        if(key === 9 && e.shiftKey){  /*탭키 + 쉬프트키를 누르면 */
            $('.related-area').stop().slideUp();
            $('.sc-related .related').removeClass('active')
        }
    });
    $('.related-area .sub-item:last-child').keydown(function (e) { 
        key = e.keyCode;
        if(key === 9 && !e.shiftKey){
            $('.related-area').stop().slideUp();
            $('.sc-related .related').removeClass('active')
        }
    });

고정 스크롤 업

❗️ 고정 스크롤 업 작업

.fix-top { 
width: 34px; 
height: 34px; 
background: url(../images/cc-scrollup.png) center/34px 34px no-repeat; position: fixed; 
bottom: -50px; 
left: 50%; 
margin-left: 600px;  /*중심축을 지정한 다음 margin-left로 이동*/
transition: 1s; 
opacity: 0; 
visibility: hidden; } 

.fix-top.active { opacity: 1; visibility: visible; bottom: 50px; }