서울시청 클론코딩

💻 서울시청 클론코딩

• 사이트: 서울시청
• 사용언어: HTML, CSS, Jquery
• 분류: 적응형 PC, 클론코딩

---

📌 개선사항

tab키 접근성을 고려하여 코딩을 진행하였습니다.

📌 KEY POINT

• 제이쿼리 활용
• swiper 라이브러리

1. 제이쿼리 활용

💚 언어선택 구간
서울시청 내 언어선택 구간에서 option 안 value에 이동 할 주소를 입력하고 제이쿼리 클릭이벤트를 통해 'GO'버튼을 누르면 이동할 수 있게 해주었다.

 // 제이쿼리 소스
  $('#langBtn').click(function(){
        url=$('#langList').val();
        window.open(url);
    })

💚 아코디언 메뉴
해당버튼을 누를 때 메뉴들이 slideUp이 될 수 있도록 구현되었으며 버튼이 눌렸을 때 화살표도 돌아가도록 애니메이션을 구현하였습니다.

// 제이쿼리
 $('.sc-related .btn-related').click(function(){
    if($(this).hasClass('active')){
       $('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
       return false;
  }
  $('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
  $(this).addClass('active').siblings('.sub-area').slideDown();
 })

💚 tab키 접근성
시각장애인분들은 tab키를 통해 메뉴를 읽기 때문에 tab키로 이동로 이동 할 수 있도록 구현하였다.

• keydown(): 키 입력 시 발생되는 이벤트

• 버튼이 아닌 a태그를 사용한 곳(중앙행정기관 부분)에는 target:_blank를 주는 것이 좋음.

• 제이쿼리 구현

// 직접 구현한 소스
 $('.sc-related .sub-item:first-child a').keydown(function(e){
    key = e.keyCode;
    if(key === 9 && e.shiftKey){
       $('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
     }
 })
 $('.sc-related .sub-item:last-child a').keydown(function(e){
    key = e.keyCode;
    if(key === 9 && !e.shiftKey){
        $('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
    }
 })


// 리팩토링 한 소스
 $('.sc-related .sub-item a').keydown(function(e) {
    const key = e.keyCode;
    const firstChild = $(this).parent().is(':first-child');
    const lastChild = $(this).parent().is(':last-child');
    const shift = e.shiftKey;
    console.log(firstChild);
    if((key === 9 && shift && firstChild) || (key === 9 && !shift && lastChild)){
       $('.sc-related .btn-related').removeClass('active').siblings('.sub-area').slideUp();
      }
  });

💚 업버튼 구현

• css

.btn-up{
  position: fixed;
  bottom: -100px;
  left: 50%;
  display: block;
  width: 34px;
  height: 34px;
  margin-left: 600px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s,bottom 1s;
}
.btn-up.show{
  visibility: visible;
  opacity: 1;
  bottom: 100px;
}

• 제이쿼리

// 웹용 홈페이지이기 때문에 정확한 높이를 정해줘야한다.
$(window).scroll(function(){
 curr=$(this).scrollTop();
 if(curr >= 100){
   $('#topBtn').addClass('show')
 } else{
   $('#topBtn').removeClass('show')
 }
})


$('#topBtn').click(function(e){
	e.preventDefault();
    window.scrollTo({top:0,behavior:"smooth"})
})

• visibility: hidden과 display: none의 차이
  • visibility: hidden -> 3개에 박스 중 2번째 박스를 visibility: hidden으로 처리한다면 그 자리는 비어있는 상태가 된다. 애니메이션 효과를 줄 수 있다.
  • display: none -> 3개에 박스 중 2번째 박스를 display: none으로 처리한다면 2번째 박스에 자리는 아예 사라지게 된다. 애니메이션 효과를 줄 수 없다.

2. swiper 라이브러리

• fragnation은 swiper 안쪽에 넣어줘야지 커스텀을 할 수 있다.
• disableOnInteration은 loop를 통해 자동으로 움직이고 있는 슬라이드를 조정할 수 있다. 만약 disableOnInteration: true를 준다면 자동재생 되고 있는 슬라이드를 만지게 되면 멈추게 된다.
• 메인슬라이드에서 탭메뉴를 누르면 자동으로 그 카테고리에 슬라이드로 넘어갈 수 있게 코드를 구성하였다.

// html
 <div class="group-nav">
   <a href="" role="button" class="btn-nav news active" data-idx="0" aria-selected="true"><span>주요뉴스</span></a>
   <a href="" role="button" class="btn-nav citizen" data-idx="4" aria-selected="false"><span>시민참여</span></a>
 </div>
 
 
// 제이쿼리
 on:{
    "slideChange":function(){
       if(this.realIndex >= 4){
           $('.sc-slide .group-nav .btn-nav.citizen').addClass('active').siblings().removeClass('active')
       }else{
           $('.sc-slide .group-nav .btn-nav.news').addClass('active').siblings().removeClass('active')
            }
       }
  }
  
  $('.sc-slide .group-nav .btn-nav').click(function(e){
        e.preventDefault();
        idx=$(this).data('idx');
        $(this).addClass('active').siblings().removeClass('active');

        mainSlide.slideTo(idx);
    })

---

🔥 까먹지 말 것!

• img 태그에서 alt 꼭 적어주기! -> 설명이 있는 곳이라면 따로 안 적어줘도 됨.
• input에는 버튼에 대한 설명을 적어주는게 좋음. -> aria-label을 통해
• 정보, 통신이 들어가는게 아니라면 button 태그를 써주는게 좋음.
• 카테고리급은 em으로 적어주는게 좋음.
• group으로 묶었다면 그 밑은 h3를 적어주는게 좋음.
• 제목이 없는 섹션에는 꼭 설명을 쓰고 .blind처리하기!