[💻] 실습 - 서울시청

NEW 리뉴얼!!

📖 Overview

사이트명: 서울시청
작업 기간: 3일 소요
라이브러리: swiper, jQuery
유형: PC 적응형, 클론 코딩
참여도: 100%

👀 Check-point

• swiper를 사용하여 슬라이드 구현 가능한가
• 키보드 이벤트 keydown 닫는 기능
• (new) 스킵네비게이션 구사
• (new) value로 사이트 이동
• (new) 탭으로 컨텐츠들 이동

관공서는 마크업이 특히 중요하다

웹접근성 품질마크 - 장애인 및 고령자가 웹 사이트 이용에 불편이 없도록 웹 접근성 표준지침을 준수한 우수 사이트에 대해 웹 접근성 수준을 인정하고 이를 상징하는 품질 마크를 부여하는 인증제도

📌 css layout에 연결할때 순서

/* 폰트먼저*/
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700&display=swap');

@import url(./reset.css);
@import url(./common.css);

1. 폰트연결
2. reset.css 연결
3. common.css 연결

--리뉴얼로 인해 업데이트--

📌 스킵 내비게이션

👉 사용하는 이유

시각 장애인 또는 마우스 사용이 불가한 환경에서 사용이 편리하게 접근성을 위해 쓰인다.
콘텐츠가 많을 경우 tab 키를 수없이 누르는 행위 대신 원하는 영역으로 바로 접근할 수 있는 메뉴 바로가기 기능이라고 할 수 있다.

• body태그 맨 처음으로 위치해야한다.
• tab이용시 스킵 네비게이션이 노출되게 해야한다.
• 처음에 한번만 사용해야한다.
  -> 과도하게 사용시 구조와 페이지 이용을 복잡하게 할 뿐이다!
• 스킵 네비게이션은 비장애인 사용자들을 위해 화면에서 보이지 않게 작업해야한다.

✨ 가장 맨위에 위치해야함!

📌 이미지 설명 figure

<figure>
    <!-- 독립적인 이미지컨텐츠(시멘틱태그)  figure-->
    <img src="./asset/image/bg/SSTORY_20220512163330_22137.jpg" alt="광고이미지"><!-- 알트필수 -->
    <figcaption class="blind">
        나는 서울에서 논다. 서울로 떠나는 캠핑
        <!-- 알트에 들어갈 내용 쓰면됨 안보여주게 해야함, 텍스트 제공은 필수임-->
    </figcaption>
</figure>

독립적인 이미지컨텐츠(시멘틱태그) 에는 설명이 필요하다

alt에 설명글을 쓰기에 너무 길었을때 figure

• figure로 이미지를 감싸주고 figcaption을 blind처리해주고 이미지에 있는 모든 내용 써준다

📌 img쓸때 주의해야할점

• 클래스를 쓸때 ico01,2… 이런 이름보다 각 이미지가 보여지는 이름을 주는게 좋다.
  ->ex) ic-service

📌 체크박스 꾸미기

<div class="chk-wrap">
    <input type="checkbox" name="" id="ck">
    <label for="ck">오늘 하루 보지 않기 </label>
    <button class="btn-close"><span class="blind">닫기</span></button>
</div>

◼ button은 데이터 받아올때 사용하자

• a태그도 가능하긴함, 스크립트요소가 강하면 button이 좋음
  사실 스크립트로 다 전송하기땜에 멀로하든 상관은 없음
• select안에 input은 들어가면 안돼❌
• 체크박스는 대부분 다른걸로 꾸며줌으로 체크박스라고 잘 안씀
  background를 쓰거나 after로 박스를 만들어줌, 제이쿼리로 active주면 끝~
  
  

💡🤔 왜??

박스가 체크될때 색이라던지 체크되는 이미지라던지 페이지마다 다 다르기때문에

📌 언어리스트(value 이동)

<div class="select-area">
  <select name="" id="selectLang">
    <!-- 스크립트 언어팩만들어서 넘어가게됨 -->
    <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>
  <button type="button" class="select-btn" id="btnLang" value="GO">GO</button>
</div>

$('#btnLang').click(function () {
        link = $('#selectLang').val()
        //  console.log(link);
        window.open(link);
    })

• 해당언어로 바뀐 페이지들은 개발자들이 스크립트에서 언어팩을 만들어서 넘겨준다.
• select안 option value 값에 각 언어 사이트 주소를 넣기
• click 이벤트로 GO 버튼 클릭 시 해당 value 값을 가져와 이동하게 하는 스크립트 작성

📌 aria-label

검색엔진 상 노출이 중요하지 않은 부분!

<button class="btn-keybored" aria-label="가상키보드 열기"></button>
<button type="button" class="btn-search" aria-label="검색"></button>

role은 태그의 역활을 알려주는것
aria-label은 태그의 의미를 적어주는 이름표!

주의!!
시멘틱 태그는 자체적으로 의미가 있으니까 role 붙이지 말기

<div role="button" aria-label="펼치기"><i class="icon-arrow"></i></div>
❌
<button aria-label="펼치기"><i class="icon-arrow"></i></button>
⭕

📌 탭을 이용한 클릭이벤트

이렇게 두개가 겹쳐져 있는 클릭이벤트는 일명 📂‘파일철코딩’을 하면 좋다

→ 같은 내용이 버튼을 눌렀을때 틀은 그대로 내용만 바뀌니까

→ 슬라이드는 다 떠있어야한다 (absolute)

• 자동 슬라이드는 swiper의 autoplay를 사용한다.

autoplay: {
        delay : 2500,
        speed : 500,
        disableOnInteraction: false,
    }

이전엔 숫자와 버튼까지 하나하나 작성했지만 스와이퍼 적용 후 코드가 간단해짐
-before-

 <div class="contral-area">
  <div class="number">
    <span class="curr">2</span>/
    <span class="total">5</span>
  </div>
  <a href="" class="prev btn"><span class="blind">이전</span></a>
  <div class="btn-play">
    <a href="" class="start"><span class="blind">재생</span></a>
    <a href="" class="pause active"><span class="blind">정지</span></a>
  </div>
  <a href="" class="next btn"><span class="blind">다음</span></a>
</div>

-after-

코드를 입력하세요

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

$('.sc-slide .slide-title').click(function (e) {
        e.preventDefault(); 
        $(this).parent('.slide-content').addClass('active').siblings('.slide-content').removeClass('active');
        //탭을 클릭할때 클래스'active'를 추가하고 형제요소에 들어있는 클래스'active'를 뺀다.

        if ($(this).parent().hasClass('slide1')) {
            slide2.autoplay.stop();//서로반대되는건 정지

            if ($(this).parent().find('.pause').hasClass('active')) { //현재 pause에 active가 들어가있냐
                slide1.autoplay.start(); 
            } else {
                slide1.autoplay.stop();
            }
            
        } else {
            slide1.autoplay.stop();//서로반대되는건 정지

            if ($(this).parent().find('.pause').hasClass('active')) {
                slide2.autoplay.start(); //시작할때 자동으로 스타트
            } else {
                slide2.autoplay.stop();
            }
        }
    })

📌 슬라이드에 호버시 멈춰라!

// 첫번째 슬라이드 컨트롤
    $('.slide-content').hover(function(){
        if(!$(this).find('.start').hasClass('active')){ /* !가 들어가서 부정문 active가 없다면 멈춰라 */
            slide1.autoplay.stop();
        }
    },function(){
        if(!$(this).find('.start').hasClass('active')){
            slide1.autoplay.start();
        }
    })

📝 해석
.slide-content에 호버했을때 .start 클래스를 찾아서 active가 있는지 확인해라.
active가 없다면 멈춰라

💡 제이쿼리에서 ! 는 부정문이다!!
hasClass 자체가 true false를 갖는애다.

📌 hover시 이미지 커지는 이벤트

.sc-new .new-item .img-box:hover img{
    transform: scale(1.2);
}
.new-list .img-box img{
    transition: all 0.3s;
}

• 이벤트 주려는 애(img)한테 transition 속도를 줘야한다.

📌 슬라이드 탭 + keyCode

키보드 이벤트 객체에는 눌리거나 놓아진 키에 다양한 메타정보다 담겨 있다.

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

◼ keyup -키보드에서 손을 땠을 때 실행 -> 주로 실시간 검색 시 사용
◼ keydown - 키보드를 눌렀을 때 실행 + 키보드를 누르고 있을 때 한번만 실행됨
◼ keypress - 키보드를 눌렀을 때 실행 + 키보드를 누르고 있을 때 계속 실행됨

$('.sc-tab ul').stop().slideUp(); //모두 닫는거
$(this).siblings('ul').stop().slideToggle();

$('.sc-tab .tab-title').click(function(){
        //탭버튼을 누를경우
        if ($(this).hasClass('active')) {
        //탭버튼이 이미 액티브, 즉 열려있을때는
            $(this).removeClass('active');
        //탭배경을 지운다
            $(this).siblings('ul').slideUp();
        //슬라이드도 닫는다
        } else {
        //탭버튼에 액티브가 없다, 즉 안열려 있을경우는
            $('.sc-tab .tab-title').removeClass('active');
        //모든 탭배경을 지운다(다른 탭버튼이 이미 배경이 있을수 있으니까)
            $(this).addClass('active');
        //누른 탭만 배경을 추가한다
            $('.sc-tab ul').slideUp();
        //모든 슬라이드를 닫는다(다른 탭버튼이 액티브가 되서 슬라이드가 열려있을수 있으니까)
            $(this).siblings('ul').slideDown();
        //누른 탭버튼의 슬라이드는 다운
        }
    });

• 클릭이벤트, this를 클릭했을때 배경색을 넣고 클릭 되어있는 다른 슬라이드가 닫히고 배경색을 없앤다.
  
  

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

$('.tab-area li:first-child a').keydown(function(e){
        var v_keyCode = e.keyCode || e.which;
        if(v_keyCode == 9 && e.shiftKey){
            $('.sc-tab ul').stop().slideUp();
        }
    })
$('.tab-area li:last-child a').keydown(function(e){
        var v_keyCode = e.keyCode || e.which;
        if(v_keyCode == 9 && !e.shiftKey){
            $('.sc-tab ul').stop().slideUp();
        }
    })

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

📌 위로가기 버튼 이벤트

• 올라가는 버튼은 margin-left을 이용한다 먼저 영역의 반을 계산해준다. margin-left: 600px; / 영역의 반 352의 반 /
  

$('.btn-top').click(function(e){
        e.preventDefault();
        $('html, body').animate({
            scrollTop: 0
        }, 300);
    })

오답✍(◔◡◔)✧

• h1 안에는 div 금지
• 버튼이나 링크등등 이름 지을때 btn-000 ,link-000로 짓자

• 난 UI,Li로 마크업했지만 3개 이하들은 별로 추천안함 div > a 로 꾸며주는게 더 좋았을꺼같다
  

• h1은 페이지당 하나만 나올수 있다. 그치만 로고가 두개가 나왔을때는 밑에는 h2로 써주자

• 왜 자꾸 클릭했을때 새로고침이 되는걸까…
  →제이쿼리 a태그 새로고침 이벤트를 걸어주지 않았다ㅠ
  

• a태그에 block과 w100%,h100%를 주면 밑에까지 침범하는 현상발생
  -> box-sizing: border-box;를 걸어주지 않아서...
  

• 버튼 이미지 안나왔던 이유
  → background-position: -256px -285px을 줄때 픽셀사이에 ,(컴마) 넣어줘서ㅠ

✏ 검색창

<div class="search-area">

    <!-- 폼태그는 전송할때만, -->
    <fieldset>
        <legend class="blind">검색</legend>
        <input type="text" placeholder="검색어를 입력해 주세요" class="input-search">

        <button class="btn-keybored"><span class="blind">가상키보드</span></button>
        <!-- 이미지보다 버튼으로 주는게 좋음 -->

        <button type="button" class="btn-search">
            <span class="blind">검색</span>
        </button>
    </fieldset>

</div>

• 처음에 감쌌던 form태그는 전송할때만 쓰는것!
• 키보드랑 검색애들은 a태그도 괜찮지만 button태그로 주는게 더 좋다!

✏ 감싸는 inner

inner0,1,2등으로 섹션안에 의미가 없는애로 묶어주면서 하는게 좋다.

✏ h3사용

<li class="new-item"> 
    <h3 class="item-title item-title02">환경</h3>
    <a href="">
        <div class="img-box">
            <img src="./asset/image/content/new02.jpg" alt="">
        </div>
        <p class="new-con">서울식물원, 식재설계 공모정원 5월 25일부터 만나보세요</p>
    </a>
</li>

• h2까지만 사용하고 자꾸 h3를 사용하지 않는다. 소제목,중요한 부분 생각하고 코딩하기

✏ removeClass

tab키를 이용하여 끝에서 새로운 영역으로 넘어갔을때 active가 사라지지 않는다

✍ 해결방안

slideUp할때 효과를 준 active를 제거 해주면 된다.