서울시청 클론코딩

JW LOG·2023년 3월 28일

adaptive jquery pc portfolio

portfolio

목록 보기

2/6

🔍 Project Overview

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

✅ Check Point

스킵 네비게이션(skip navigation)
카멜 케이스(camelCase)
title과 alt 속성의 차이

📚 Learning Point

value속성 값으로 주소 이동
swiper 슬라이드 특정 슬라이드로 이동시키기
swiper 재생/정지 버튼 기능
Shift + Tab이벤트
scrollTop 페이지 최상단 이동

네비게이션 영역을 건너뛰고 바로 컨텐츠 정보를 탐색하기 위해 사용하는 용도

스킵 네비게이션은 키보드 사용자를 위해 필요한 요소로 키보드만 사용하여 하단 메뉴나 다른 페이지 메뉴로 이동시 지속적으로 탭키로 이동하여야 하는 번거로움을 덜어줄 수 있게 하기 위해 만들어진 구조이다.

markup

<div id="u_skip">
	<a href="#contents"><span>본문 바로가기</span></a>
</div>

css

#u_skip{ 
    position: absolute;
    margin: 0 auto;
    width: 100%;
    font-size: 1.15em;
    top: -10.5em;
    left: 0;
    z-index: 100;
}
#u_skip a:focus, #u_skip a:active { 
    position: absolute;
    padding-top: 0.5em; 
    width: 100%; 
    height: 2em; 
    top: 10.5em; 
    z-index: 999; 
    text-align: center;
    color:#fff; 
    background: #333; 
    overflow: visible; 
    clip: unset;
}

🔹 스킵 네비게이션 사용시 주의사항

스킵 네비게이션의 위치는 body태그 맨 처음으로 위치해야 한다.
스킵 네비게이션의 목적이 네비게이션 영역을 스킵하기 위해서 혹은 주요 서비스로 페이지 초입에서 바로 접근하기 위해 사용을 하기 때문에 네비게이션 영역 뒤에나 컨텐츠 영역 뒤에 위치하게 되면 스킵 네비게이션을 쓰는 목적이 사라지기 때문이다.

스킵 네비게이션은 처음에 한번만 사용해야 한다.
과한 스킵 네비게이션의 사용은 페이지의 구조와 페이지 이용을 더 복잡하게 할 뿐이다.

2. 카멜 케이스(camelCase)

프로그래밍을 할 때, 변수나 클래스명을 지을 때, 두가지 이상의 단어를 조합할 때 다양한 케이스를 적용할 수 있다.
그 중 중간 글자들은 대문자로 시작하지만 첫 글자가 소문자인 경우에는 낙타와 모양이 비슷하다하여 카멜 케이스라고 한다.

🔹 자주 쓰이는 케이스 스타일 종류

스네이크 케이스(snake_case)
snake_case : 언더바(_) 가 들어 있는 표현 방식을 뱀처럼 생겼다고 하여 스네이크 케이스라고 한다.
파스칼 케이스(PascalCase)
PascalCase : 첫 글자와 중간 글자들이 대문자인 경우 파스칼 언어의 표기법과 유사하다고 하여 파스칼 케이스라고 한다.
케밥 케이스(Kebab-Case)
kebab-case : 케밥 케이스는 케밥이 꼬챙이에 꽂힌 모습에서 생긴 방법이다. 모든 단어가 소문자로 되어 있고, 단어와 단어 사이는 바(-)로 연결된다.

3. title과 alt 속성의 차이

alt

Alt Text(대체 텍스트), "alternative text"의 축약형
이미지에 대해 이해 할 수 있도록 텍스트를 제공하는 속성.

<a href="" class="img-box">
  <img src="./assets/images/banner_slogan.jpg" alt="서울브랜드 슬로건, 여러분의 선택은? 시민 선호도 조사에 참여해주세요.">
</a>

특징

시각장애인의 웹서핑시 사용하는 리더(reader) 프로그램이 텍스트는 읽어주나, 이미지는 읽을 수 없으므로 alt 속성의 설명을 읽어준다.
웹서핑시 인터넷 접속 등의 문제로 해당 이미지를 불러오지 못했을 때, 이미지 설명을 보여준다.
Alt Text(대체 텍스트)는 검색 엔진이 이미지를 올바르게 색인화하고 유기적 트래픽을 유도하는 데 도움이 되는 이미지에 더 나은 콘텍스트를 제공하여 SEO 순위를 향상시켜준다.

title

요소와 관련 된 추가 정보를 나타내는 텍스트

<div class="sns-wrap">
	<a href="" target="_blank" title="새창열림" class="link-sns instagram"><span class="blind">인스타그램</span></a>
</div>

특징

이미지뿐 아니라, a, span, td태그 등 거의 대부분의 태그에 사용할 수 있고, '새창열림' 등의 간단한 풍선도움말 형식을 사용할 수 있다.
모바일기기에서는 한 번 터치시 title내용을 보여주고, 두 번 터치시 해당 링크로 접속이 된다.

📚[LP] 1. `value`속성 값으로 주소 이동

markup

<!-- 언어선택 -->
<div class="lang-area">
  <label for="lang-list" class="blind">언어선택</label>
  <select name="" id="langList" class="lang-list">
    <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="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" id="langBtn" class="btn-lang">go</button>
</div>
<!-- //언어선택 -->

jQuery

/**
* @언어선택 셀렉트박스 링크이동
* @url 셀렉트의 벨류값
*/

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

url변수에 선택된 옵션의 value값을 저장 후, window.open()에 변수값을 넣어
go버튼을 누를 시 선택된 주소로 열릴 수 있도록 한다.

📚[LP] 2. swiper 슬라이드 특정 슬라이드로 이동시키기

🔹 탭 클릭 시 해당탭에 맞는 슬라이드로 전환

markup

jQuery

$('.sc-slide .slide-tab a').on('click', function(e) {
      e.preventDefault();
      idx = $(this).data('index');
      $('.sc-slide .slide-tab a').removeClass('active');
      $(this).addClass('active');
       
      visualSlide.slideToLoop(idx);
});

탭버튼에 data값을 넣어 제이쿼리내에서 변수값으로 담은 후, slideToLoop()에 넣어 탭 클릭시 데이터로 정해둔 인덱스값이 올 수 있도록 했다.

slideTo가 아닌 slideToLoop인 이유는 해당 슬라이드가 loop : true이기 때문에 인덱스값이 계속 변하기 때문이다. slideToLoop로 하면 슬라이드 초기 고유 인덱스값을 가져올 수 있다.

🔹 슬라이드 autoplay를 통한 탭 전환

jQuery

visualSlide.on('slideChange',function(){

if(this.realIndex >= 4){
 $('.sc-slide .slide-citizens').addClass('active').siblings().removeClass('active');
 }else{
 $('.sc-slide .slide-news').addClass('active').siblings().removeClass('active');
 }
})

console.log(this);로 확인하면 해당 슬라이드의 고유인덱스값을 확인 할 수있다.
이를 활용해서 다시 console.log(this.realIndex) 로 확인하면 전환되어야 할 슬라이드의 인덱스값을 알 수 있다.

slideChange는 슬라이드가 넘어갈때 이벤트를 줄 수 있다.
if조건문을 통해 전환되는 인덱스값의 이상일 경우 해당탭에 active클래스를 추가했다.

해당 코드의 this는 제이쿼리의 선택자$(this)가 아닌 해당 스와이퍼(visualSlide)를 선택하는 자바스크립트 선택자이다. swiper-api를 통해 swiper내에서 만들어둔 소스를 활용하는 것이기 때문에 구분된다.

swiper 관련기능은 swiper-api에서 더 많이 참고 할 수있다.

📚[LP] 3. 스와이프 재생/정지 버튼 기능

markup

jQuery

 $('.sc-slide .autoplay').click(function(e){
      e.preventDefault();

      if($(this).hasClass('on')){
        $(this).removeClass('on').attr('aria-label','자동재생 정지')
        visualSlide.autoplay.start()
      }else{
        $(this).addClass('on').attr('aria-label','자동재생 적용')
        visualSlide.autoplay.stop()
      }

})

if조건문을 통해 on클래스가 활성화 되있을 경우 정지상태로, 정지된 상태일 경우 플레이버튼으로 바뀌도록 구현했다.

📚[LP] 4. Shift + Tab이벤트

Tab으로 이동할 뿐 아니라 Shift + Tab으로 뒤로 돌아갈때 아코디언 메뉴가 닫히는 기능을 구현했다.

jQuery

/**
* @시프트탭이벤트
* @탭키 = 9
*/
$('.sc-related .nav-list li:first-child').keydown(function(e){
      if(e.keyCode === 9 && e.shiftKey){
        $('.sc-related .sub').stop().slideUp();
        $('.sc-related .nav').removeClass('on');
      }
})

$('.sc-related .nav-list li:last-child').keydown(function(e){
      if(e.keyCode === 9 && !e.shiftKey){
        $('.sc-related .sub').stop().slideUp();
        $('.sc-related .nav').removeClass('on');
      }
})

키를 누를 때는 keydown 이벤트가 발생하고, 키를 놓을 때는 keyup이벤트가 발생한다.
keydown 이벤트는 키를 누르고 있을 때 단 한번만 실행한다.
이외에도 keypress가 있지만 더 이상 권장하지 않는 기능이다.

해당 코드에서 console.log(e.keyCode)로 Tab키 코드를 확인한다.
이를 통해 Tab키 코드넘버는 '9'이고, console.log(e.shiftKey)의 결과값은 false이다.
조건문을 통해 탭키를 누르고 쉬프트키는 누르지 않는 상태(e.shiftKey = false)는 아코디언 메뉴가 슬라이드업되게 하고
if(e.keyCode === 9 && !e.shiftKey) 쉬프트키를 누른상태(!e.shiftKey = true)의 부정문을 써서 메뉴가 닫히게 했다.

🔹 KeyboardEvent

keydown 키보드를 누를 때 실행. 키를 누르고 있을 때 단 한번만 실행

~~keypress: 키보드를 누를 때 실행. 키를 누르고 있을 때 계속 실행~~
더 이상 권장하지 않는 기능으로 대체기능으로 beforeinput 또는 keydown 을 사용해야한다.
더 많은 참고글은 해당링크에서 확인 할 수 있다.
keyup: 누른 키에서 손을 뗄 때 실행

📚[LP] 5. scrollTop 페이지 최상단 이동

jQuery

/*
* 스크롤 할 때 scrollTop버튼 보이기
*/
$(window).scroll(function(){            
  curr = $(this).scrollTop();
  if(curr >= 100){
    $('.btn-top').addClass('show')
  }else{
    $('.btn-top').removeClass('show')
  }
})

/*
* 버튼 눌렀을때 페이지 상단으로 스크롤 되기
*/
$('.btn-top').click(function(){
	$('html,body').animate({scrollTop:0},300)
})

스크롤 할 때 버튼이 보이게 할려면 현재 스크롤 위치값을 구해야한다.
curr변수 값에 현재 스크롤값을 넣고 그 값이 100보다 클 경우 버튼이 나타나도록 구현했다.

버튼을 눌렀을때 animate({scrollTop:0},300) 애니메이트로 움직임을 주고 위치와 속도를 설정해 페이지 최상단으로 가도록 구현했다.

References

About Web : [웹접근성] 스킵 네비게이션 (skip navigation)
허도경, limewhale : 스킵 내비게이션 쉽게 구현하고 이해하기
컴공생의다이어리 : 스네이크 케이스
designlog : SEO, 이미지 Alt Text(대체 텍스트)를 최적화해야 하는 이유
QRD : alt속성과 title 속성 비교

JW LOG

이전 포스트

NAVER 클론코딩

다음 포스트

서울시청 클론코딩

portfolio

🔍 Project Overview

✅ Check Point

📚 Learning Point

1. 스킵 네비게이션(skip navigation)

🔹 스킵 네비게이션 사용시 주의사항

2. 카멜 케이스(camelCase)

🔹 자주 쓰이는 케이스 스타일 종류

3. title과 alt 속성의 차이

alt

특징

title

특징

📚[LP] 1. `value`속성 값으로 주소 이동

📚[LP] 2. swiper 슬라이드 특정 슬라이드로 이동시키기

🔹 탭 클릭 시 해당탭에 맞는 슬라이드로 전환

🔹 슬라이드 autoplay를 통한 탭 전환

📚[LP] 3. 스와이프 재생/정지 버튼 기능

📚[LP] 4. Shift + Tab이벤트

🔹 KeyboardEvent

📚[LP] 5. scrollTop 페이지 최상단 이동

References

NAVER 클론코딩

안다르 클론코딩

0개의 댓글

서울시청 클론코딩

portfolio

🔍 Project Overview

✅ Check Point

📚 Learning Point

1. 스킵 네비게이션(skip navigation)

🔹 스킵 네비게이션 사용시 주의사항

2. 카멜 케이스(camelCase)

🔹 자주 쓰이는 케이스 스타일 종류

3. title과 alt 속성의 차이

alt

특징

title

특징

📚[LP] 1. value속성 값으로 주소 이동

📚[LP] 2. swiper 슬라이드 특정 슬라이드로 이동시키기

🔹 탭 클릭 시 해당탭에 맞는 슬라이드로 전환

🔹 슬라이드 autoplay를 통한 탭 전환

📚[LP] 3. 스와이프 재생/정지 버튼 기능

📚[LP] 4. Shift + Tab이벤트

🔹 KeyboardEvent

📚[LP] 5. scrollTop 페이지 최상단 이동

References

NAVER 클론코딩

안다르 클론코딩

0개의 댓글

📚[LP] 1. `value`속성 값으로 주소 이동