✏️ Check Point

• Tab key 활용
• 자바스크립트 활용
• 스크립트 내 swiper 활용

---

1. Tab key로 이동 및 선택

접근성을 고려한 탭키 이동이 가능하도록 하였다.

2. option->value 스크립트 구현

select 안에 각각의 option->value로 링크를 넣어주고,
자바스크립트 .click함수를 통해 원하는 언어를 클릭하면 해당 주소로 이동하도록 해주었다.

//html review

<select name="lang" id="langList">
	<option value="http://english.seoul.go.kr/?SSid=101_01">ENGLISH</option>
	<option value="http://japanese.seoul.go.kr/?SSid=101_02">日本語</option>
	<option value="http://chinese.seoul.go.kr/?SSid=101_04">简体中文</option>
	<option value="http://tchinese.seoul.go.kr/?SSid=101_03">繁体中文</option>
	<option value="http://world.seoul.go.kr/">WorldWide</option>
</select>


//js review

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

언어선택하기(lang-area) onclick :
서울시청에는 언어 선택해서 넘어가는 스크립트를
html에서 스크립트를 쓸 수 있는 onclick으로 반영하였다.
(본인은 자바스크립트 .click함수를 사용하여 오픈링크를 걸어주었다.)

3. swiper 슬라이드 2가지 전환

동일 클래스명으로 swiper 효과를 주고,
이전 / 재생 or 정지 / 다음 버튼 기능을 추가하여
수동으로도 작동할 수 있도록 하였다.

4. swiper-pagination 커스텀

하단에 서울시 지원 슬라이드 영역의 페이지네이션을 swiper -> pagination -> type:"custom"으로 현재값과 전체값의 페이지를 계산하여 작동시켰다.

//js review

const supportSlide = new Swiper("#supportSlide", {
        slidesPerView:3,
        spaceBetween:43,
        loop:true,
        pagination: {
            el: ".fraction",
            type: "custom", //페이지네이션 커스텀
            renderCustom:function(swiper, current, total){
                return `<span class="curr">${current}</span>/<span class="total">${total}</span>`;
            }
        },
        autoplay:{
            delay: 3000
        },
        navigation: {
        nextEl: ".next",
        prevEl: ".prev",

        },
    });

5. 아코디언 메뉴 구현

js

하단 메뉴바를 열 때, 활성화된 페이지만 slideUp 하도록 해당버튼과 그의 형제버튼을 if/else로 열고 닫도록 해주었다.

//js review

$('.related-list .btn-nav').click(function (e) { 
        e.preventDefault();
		
        if ($(this).hasClass('active')) {
            $(this).siblings('.sub-area').stop().slideUp();
            $('.related-list .btn-nav').removeClass('active');
        } 
        else {
            $('.sub-area').stop().slideUp();
            $(this).siblings('.sub-area').stop().slideDown();
            $('.related-list .btn-nav').removeClass('active');
            $(this).addClass('active');
        }
    });

css

해당버튼을 열때, 서브창은 하나씩 보이도록 하기위하여
sub-area(서브창 전체영역)를 섹션기준으로 앱솔루트를 적용시키고,
위드값을 100% 주었다.

//css part review

.sc-related{ position: relative; }
.sc-related .sub-area{
    position: absolute;
    width: 100%;
    left: 0;
    bottom: calc(100% - 1px);
    background: #fff;
    z-index: 1;
    border: 1px solid #d0d0d0;
    display: none;
}

---

📌 SIDE NOTE

1.form 내부 구성은 fieldset으로.

fieldset 사용 시 안에 legend로 이름 정의해주어야한다.

2. input -> title

input 안에 title은 추가 설명을 적어주는 역할을 한다.
(마우스 오버했을 때, 해당 title 내용이 뜸)

3. 접근성을 생각한 마크업 구조

마크업할 때 접근성 꼭 생각하기.
장애인 중심에서 봤을 때는 읽는 순서를 중요하게 따지고 들어가야한다.
(특히 탭이랑 탭 안에 묶인 내용 소스)

4. swiper 마크업 class명

스크립트 siwper는 절대로 마크업 클래스명이 바뀌면 안된다.
(작동 자체가 안됨)

5. display:table

서울시청 공식사이트에서 사용한 display:table;은
부모태그에 display:table
자식태그에 display:table-cell
-> 갯수에 상관없이 동일한 간격으로 영역을 가지게 된다.

• 여기서 내용이 길어져서 너비가 동일하지 않을경우에는
  부모태그에 table-layout:fixed를 선언해주면 완료.