🏢 서울시청

• 프로젝트 이름 : 서울시청
• 사용한 언어: HTML, CSS, JavaScript, jQuery
• 웹사이트 유형: Adaptive (적응형)

select / option 링크 생성하기

HTML

<div class="select-wrap">
	<span class="blind">언어선택</span>
    <select name="language" id="langList" class="lang-select">
    	<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="https://tchinese.seoul.go.kr/?SSid=101_03">繁体中文</option>
        <option value="https://world.seoul.go.kr/">WorldWide</option>
    </select>
    <button class="link-go" aria-label="선택된 사이트로 이동" id="langBtn">GO</button>
</div>

JavaScript / jQuery

$('#langBtn').click(function(){
  url=$('#langList').val();
  window.open(url);
})

1. option 요소에 value 추가 (*option의 value는 해당 option이 선택되었을 때 서버로 제출되는 값)

2. value 에 각각 상응하는 웹사이트 주소 입력하기

3. button 의 아이디 #langBtn 에 클릭 이벤트 생성하기

4. 변수 url 을 생성 (select 의 아이디 #langList 의 value 값 즉 각각의 웹사이트 주소 값을 불러올수 있습니다.)

5. 새로운 브라우저 창을 열 때 사용하는 JavaScript 함수 window.open(); 에 각각의 웹사이트 주소 값 즉 변수 url 을 넣는다.

option 을 선택하고 buttton 을 클릭했을때 각각의 상응하는 사이트 (value) 로 이동하는 것을 확인할 수 있습니다.

Tip

button 에 WAI ARIA 속성 aria-label="선택된 사이트로 이동" 을 추가하여 웹 접근성을 향상시킬수 있습니다.

tab 버튼을 swiper에 연동하기

HTML

tab 영역

<div class="group-tab">
	<button class="btn-news on" data-tab=".news-slide">
		<i class="ic-news"><span class="blind">주요뉴스아이콘</span></i>
		<span class="text">주요뉴스</span>
	</button>
	<button class="btn-citizen" data-tab=".citizen-slide">
		<i class="ic-citizen"><span class="blind">시민참여아이콘</span></i>
		<span class="text">시민참여</span>
	</button>
</div>

swiper 영역

<div class="swiper news-slide on">
  ...
</div>
<div class="swiper citizen-slide">
  ...
</div>

jQuery

$('.sc-visual .group-tab button').click(function(){
	tabClass=$(this).data('tab')
	$(this).addClass('on').siblings().removeClass('on');
	$('.sc-visual .swiper').removeClass('on');
	$(tabClass).addClass('on');
})

1. 모든 button 의 클릭 이벤트 생성하기

2. 각 button 에 데이터 속성 (data-tab="")을 정의하고 각각 상응하는 swiper의 클래스 명을 입력하기

3. 변수 tabClass 생성 (클릭된 버튼의 data-tab 속성 값을 가져와서 tabClass 변수에 저장)

4. 클릭된 버튼에 on 클래스를 추가하고 동시에 형제 요소들의 on 클래스를 제거하여 탭 버튼 만들기

5. 클래스 내부에 있는 모든 swiper의 on 클래스를 제거하여 초기화 시키기

6. 클릭된 버튼의 data-tab 속성에 해당하는 swiper에 on 클래스를 추가하여 해당 swiper를 탭 버튼과 연동

자동 재생 버튼 swiper에 연동하기

HTML

<div class="control-area">
	<button class="btn-prev"><span class="blind">이전슬라이드</span></button>
	<button class="btn-autoplay" data-slide="0"><span class="blind">자동재생 정지</span></button>
	<button class="btn-next"><span class="blind">다음슬라이드</span></button>
</div>

CSS

.flex1 .swiper .control-area .btn-autoplay{
    background-position: -285px -285px;
}
.flex1 .swiper .control-area .btn-autoplay.on{
    background-position: -269px -285px;
}

jQuery

swiper 영역

const mainSlide1 = new Swiper(".news-slide", {...});
const mainSlide2 = new Swiper(".citizen-slide", {...});
const bannerSlide = new Swiper(".banner-slide", {...});

자동재생 버튼 영역

slideArr = [mainSlide1,mainSlide2,bannerSlide]
$('.swiper .btn-autoplay').click(function(){
	idx = $(this).data('slide');
    if ($(this).hasClass('on')) {
      slideArr[idx].autoplay.start();
    } else {
      slideArr[idx].autoplay.stop();
    }
    $(this).toggleClass('on');
  });

1. 배열 slideArr 생성 (mainSlide1 는 0, mainSlide2 는 1, bannerSlide는 2의 값을 각각 가지게 됨)

2. .btn-autoplay 모두에게 배열 각각에 상응하는 데이터 속성 (data-slide="") 값 (0,1,2) 추가하기

3. 자동재생 버튼 .btn-autoplay 에 클릭 이벤트 추가하기

4. 변수 idx 정의 (클릭된 버튼의 data-slide 속성 값 (0,1,2)을 추출하여 변수 idx에 저장)

5. 조건문을 사용해 클릭된 버튼이 on 클래스를 가지고 있는지 확인하고, on 클래스가 있다면 해당 변수 idx에 있는 슬라이드의 자동재생을 시작하게 (autoplay.start();) 만들기

6. on 클래스가 없을 때에는 해당 변수 idx에 있는 슬라이드의 자동재생을 멈추게(autoplay.stop();) 만들기

7. 클릭된 버튼에 on 클래스를 토글하여 (toggleClass) 재생 버튼, 정지 버튼이 바뀔수 있게 만들기

keydown 이벤트 생성하기 (접근성 코드)

jQuery

$('.sc-gov .direct-item:first-child').keydown(function(e){
  key = e.key;
  if (key === 'Tab' && e.shiftKey) {
    slideClose();
  }
})
$('.sc-gov .direct-item:last-child').keydown(function(e){
  key = e.key;
  if (key === 'Tab' && !e.shiftKey) {
    slideClose();
}
})

1. 클래스 'direct-item'의 첫번째 자식(:first-child)과 마지막 자식(:last-child)에 keydown 이벤트 핸들러를 등록하기 (이벤트 핸들러는 키보드 키가 눌렸을 때 실행)

2. 변수 key 생성 (이벤트 객체에서 key의 값을 추출하여 변수 key에 저장)

e.key란?

키보드 이벤트에 대한 정보를 제공하는 속성으로 키보드 이벤트가 발생할 때 눌린 실제 키의 이름을 문자열로 반환합니다.

3. 'direct-item'의 첫번째 자식(:first-child)에 조건문을 사용해 Tab 과 Shift 키가 같이 눌렸을때 slideClose(); 슬라이드를 닫는 함수를 호출하기

4. 'direct-item'의 마지막 자식(:first-child)에는 Tab 과 Shift 키가 같이 눌리지 않았을 때 slideClose(); 슬라이드를 닫는 함수를 호출하여 완성하기