💻 서울특별시청 클론코딩
- 사이트명: 서울특별시청
- 제작기간: 22.07.09 ~ 22.07.10 (2일 소요)
- 사용언어: html, css, js
- 분류: 적응형 PC, 클론코딩
🔍 Main Point
- window.open()를 이용한 새창열기
- float 방식의 slick slider 사용
- 요소 쌓임 순서를 이용한 슬라이드 겹침
- 활성화된 탭버튼과 슬라이드의 연동
- 슬라이드 재생/정지
- 키보드 이벤트(keydown)
1. window.open()
- 자바스크립트 window 객체의 open() 함수로 웹브라우저에서 새창(팝업창)을 열 수 있음
👉 작성방법
window.open(url, windowName, [windowFeatures]);
window.open('팝업주소', '팝업창 이름', '팝업창 설정');
-
url(주소 매개변수)
새창(팝업창)에 보여질 주소.
선택적인 값으로 비워두면 빈 창이 보인다. -
windowName (팝업이름 매개변수)
새로 열릴 팝업창의 이름을 지정한다.
동일한 이름의 팝업창이 열려 있을 경우 팝업창이 새로 열리지 않고 원래 열려있던 팝업창의 내용을 초기상태로 바꿈 -
windowFeatures (팝업 옵션)
선택적인 값으로 창의 크기, 스크롤, 리사이즈 가능 등의 속성을 지정한다.
📌 html
<div class="language-area">
<select id="selectLang" class="select-lang">
<option value="http://english.seoul.go.kr">ENGLISH</option>
<option value="http://japanese.seoul.go.kr">日本語</option>
<option value="http://chinese.seoul.go.kr">简体中文</option>
</select>
<a href="#" class="btn-go">GO</a>
</div>📌 js
// selectLang btn
$('.language-area .btn-go').click(function(e){
e.preventDefault();
const link = $('#selectLang').val();
window.open(link);
});2. float 방식의 slick slider 사용
- IE(Internet Explorer)와의 호환성을 위해 float 방식으로 슬라이드를 제공하는 slick을 사용하였다. (swiper의 경우 flex 방식 사용)
📌 js
//slide1
const slide1 = $('.slide1 .visual-slider');
slide1.slick({
slide: 'div',
autoplay : true, //자동재생
infinite : true, //무한반복
prevArrow : $('.slide1 .btn-prev'), //이전 화살표 설정
nextArrow : $('.slide1 .btn-next'), //다음 화살표 설정
dots: true, //페이지네이션 여부
dotsClass: 'pagination', //페이지네이션 class명 지정
customPaging: function (slider, i) {
return (i + 1) + '/' + slider.slideCount; //dots 모양을 numbering 모양으로 변경
}
});
//slide2
slide2.slick({
slide: 'div',
autoplay : true,
infinite : true,
prevArrow : $('.slide2 .btn-prev'),
nextArrow : $('.slide2 .btn-next'),
dots: true,
dotsClass: 'pagination',
customPaging: function (slider, i) {
return (i + 1) + '/' + slider.slideCount;
}
});
slide2.slick('slickPause'); //두 번째 슬라이드는 정지상태로 두기3. 요소 쌓임 순서를 이용한 슬라이드 구현
- 요소 쌓임 순서(Stack order)란 어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정하는 것
- 요소에 position 속성의 값이 있는 경우 위에 쌓임 (기본값 static 제외)
- 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임
- 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임
z-index
- 기본값: auto -> 부모 요소와 동일한 쌓임 정도
- 숫자가 높을 수록 위에 쌓임
4. 활성화된 탭버튼과 슬라이드의 연동
- 슬라이드를 absolute로 띄운 다음 활성화된 슬라이드에 z-index 값을 부여하여 보여지게 함
📌 html
<div class="slide-area slide1 active">
··· 이하생략
</div>
<div class="slide-area slide2">
··· 이하생략
</div>📌 css
.sc-visual .slide-area {
position: absolute;
right: 0;
top: 0;
width: 690px;
height: 100%;
}
.sc-visual .slide-area.active {
z-index: 2;
/*z-index 숫자 값이 높을 수록 위에 쌓임*/
}- 탭버튼을 클릭시 활성화되는 슬라이드는 이전 기록을 가지고 있어야 한다. 즉, 첫 번째 슬라이드가 재생될 경우 두 번째 슬라이드는 정지되어있어야 하고 그 반대일 경우도 동일하다.
📌 js
const slide1 = $('.slide1 .visual-slider');
const slide2 = $('.slide2 .visual-slider');
$('.sc-visual .slide-title').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active');
//클릭된 대상의 부모에게 active 클래스 부여하고 그 형제는 active 클래스 제거
//슬라이드 상태 확인하고 적용하기
if($(this).parent().hasClass('slide1')){
slide2.slick('slickPause');
//클릭된 대상이 slide1일 경우 slide2 슬라이드 정지
if($('.slide1 .btn-control').hasClass('pause')){
//slide1이 재생상태라면,
slide1.slick('slickPlay');
//slide1 슬라이드 재생
} else {
slide1.slick('slickPause');
//slide1이 정지상태라면 slide1 슬라이드 정지
}
} else {
slide1.slick('slickPause');
//클릭된 대상이 slide2일 경우 slide1 슬라이드 정지
if($('.slide2 .btn-control').hasClass('pause')){
slide2.slick('slickPlay');
} else {
slide2.slick('slickPause');
}
}
});5. 슬라이드 재생/정지
- 기본적으로 자동재생이 되고 있는 슬라이드에 정지 버튼을 누를 경우 슬라이드는 재생 버튼을 다시 누르기 전까지 계속 멈춰있으며 탭버튼으로 보여지는 슬라이드를 변경할 경우에도 마지막 상태를 기억함
📌 html
<a href="#" class="btn btn-control pause">
<i class="ico-control">
<span class="blind">자동재생 또는 정지</span>
</i>
</a>📌 js
//slide1
$('.slide1 .btn-control').click(function(e){
e.preventDefault();
//해시태그 기본값 막기
if($(this).hasClass('pause')){
$(this).removeClass('pause');
slide1.slick('slickPause');
//정지버튼을 누를 경우 슬라이드 정지!
} else {
$(this).addClass('pause');
slide1.slick('slickPlay');
//재생버튼을 누를 경우 슬라이드 재생!
}
});
//slide2
$('.slide2 .btn-control').click(function(e){
e.preventDefault();
if($(this).hasClass('pause')){
$(this).removeClass('pause');
slide2.slick('slickPause');
} else {
$(this).addClass('pause');
slide2.slick('slickPlay');
}
});6. 키보드 이벤트(keydown)
-
키보드 이벤트(Keyboard Event)는 사용자가 키를 누르거나 키를 놓을 때 발생한다. 키를 누를 때는 keydown 타입의 이벤트가 발생하고, 키를 놓을 때는 keyup 타입의 이벤트가 발생
- keydown : 사용자가 키보드의 키를 눌렀을 때 발생
- keyup : 사용자가 키보드의 키를 눌렀다가 떼었을 때 발생
-
키보드 이벤트 객체에는 눌리거나 놓아진 키에 대한 다양한 메타정보가 담겨 있다. 예를 들어 key 속성에는 키 값이, code 속성에는 코드 값이, shiftKey 속성에는 쉬프트키가 함께 눌렸는지 여부가 저장됨
$('.site-list-area .site-item:first-child a').keydown(function(e){
if(e.keyCode === 9 && e.shiftKey) {
//키보드 tab키와 shift키를 같이 누를 경우 (즉, 탭을 뒤로 이동할 경우)
$('.site-list-area').stop().slideUp();
//닫힘
}
});
$('.site-list-area .site-item:last-child a').keydown(function(e){
if(e.keyCode === 9 && !e.shiftKey) {
//키보드 shift키 없이 tab키만 누를 경우 (즉, 탭을 앞으로 이동할 경우)
$('.site-list-area').stop().slideUp();
//닫힘
}
});
코딩쪼아