서울시청 홈페이지는 웹접근성 품질마크(장애인 및 고령자가 웹 사이트 이용에 불편이 없도록 웹 접근성 표준지침을 준수한 우수 사이트에 대해 웹 접근성 수준을 인정하고 이를 상징하는 품질 마크를 부여하는 인증제도)를 받은 사이트이다. 마크업 및 구성에 공부가 될 것 같아 그쪽에 신경을 쓰며 클론 코딩을 했다.
1.swiper사용
<div class="swiper">
<!-- Additional required wrapper -->
<div class="swiper-wrapper">
<!-- Slides -->
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
...
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="btn-prev"></div>
<div class="btn-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
</div>
<script>
var swiper3 = new Swiper(".banner-slide", {
slidesPerView: 3,
loop: true,
allowTouchMove: false,
spaceBetween: 40,
autoplay: {
delay: 2000,
},
pagination: {
el: ".swiper-pagination",
type: "fraction",
},
navigation: {
nextEl: ".btn-next",
prevEl: ".btn-prev",
}
});
</script>슬라이드를 만들 때는 swiper라는 플러그인을 사용했다.
기본 구성은 swiper, swiper-wrapper, swiper-slide 세가지 div로 이루어지고 클래스명이나 구조가 달라지면 오류가 나니 주의해야 한다.
슬라이드 작동 안될때 확인해야 할 것
1.클래스명 오류
2.구조오류
3.오타
4.스크립트와 정상적으로 연결되었는가
5.swiper이름 중복된 것 아닌가
특징
1.스와이퍼라는 영역에겐 높이가 없고 나머지는 높이 100퍼센트(가장 부모한테 높이를 줘야 한다)
2.swiper-wrapper에는 z-index가 있기 때문에 하위옵션의 인덱스를 올려야지 작동이됨
위의 서울시청 홈페이지의 슬라이드를 기준으로 자주 쓰이는 기능들을 나열하면
slidesPerView:보여지는 슬라이드의 갯수
loop:끝까지 가면 반복할지 아닐지 결정
allowTouchMove:마우스로 슬라이드 이동을 가능하게 할지 결정
autoplay:자동 슬라이드. delay로 시간을 설정한다.(2000=2초)
pagination:페이지네이션.el은 페이지네이션으로 쓸 클래스명이고, 타입도 설정할 수 있다
navigation:네비게이션 화살표. el은 네비게이션 클래스명을 설정해주면 되는데 변경하지 않고 기존설정대로 사용하려면 swiper-button-prev, next를 써 주면 된다.
+추가
<div class="swiper-slide">
<figure>
<img src="" alt="이미지 설명">
<figcaption>16자 이상 설명가능</figcaption>
</figure>
</div>서울시청 슬라이드 내용물은 이미지이다. figure는 이렇게 이미지를 단독으로 쓸 때 사용하며 alt에는 반드시 그림의 설명이 들어가야 하는데 16자까지만 설명이 가능하다고 한다.
16자 이상인 경우, figcaption을 사용하면 된다.
swiper의 기능에 대해 참고한 블로그들
swiper사용법
[JavaScript] Swiper 사용법 - 슬라이드 구현
swiper-slide 총정리사용법-적용-옵션
<script>
$('.banner-slide .btn-stop').click(function (e) {
e.preventDefault();
swiper3.autoplay.stop();
$('.banner-slide .btn-start').addClass('active');
$('.banner-slide .btn-stop').removeClass('active');
})
$('.banner-slide .btn-start').click(function (e) {
e.preventDefault();
swiper3.autoplay.start();
$('.banner-slide .btn-stop').addClass('active');
$('.banner-slide .btn-start').removeClass('active');
})
</script>위의 제이쿼리는 swiper 슬라이드의 재생과 정지를 구현하기 위한 것이다.
먼저 btn-stop 정지버튼을 누르면 swiper3이란 이름을 가진 슬라이드가 자동재생을 멈추고 시작하기위한 버튼을 보여주며 정지버튼은 숨긴다. 그렇게 되면 같은 버튼을 보이게 만들 수 있다. 시작버튼도 마찬가지이다.
주의해야 할 점은 슬라이드가 한 페이지에 여러개일 때, var swiper3 = new Swiper부분의 var 변수 선언 이름을 반드시 각자 다르게 수정해 주어야 한다는 것이다.
.autoplay.start(); 같은 기능은 swiper 사이트 api에 들어가면 있다고 한다.
참고 블로그
swiper 재생,정지 자바스크립트
2.flex쓸 때는 가로길이 정해주기
<nav class="gnb-area">
<ul class="gnb-list">
<li class="gnb-item"><a href="" class="link-gnb">서울소식</a></li>
<li class="gnb-item"><a href="" class="link-gnb">시민참여</a></li>
<li class="gnb-item"><a href="" class="link-gnb">분야별정보</a></li>
<li class="gnb-item"><a href="" class="link-gnb">서울소개</a></li>
<li class="gnb-item"><a href="" class="link-gnb">부서안내</a></li>
<li class="gnb-item"><a href="" class="link-gnb">정보공개</a></li>
<li class="gnb-item"><a href="" class="link-gnb">응답소</a></li>
</ul>
<div class="util-area">
<a href="" class="link-util">로그인</a>
<a href="" class="link-util">나의서울</a>
<a href="" class="link-util">전자우편</a>
</div>
</nav>
<style>
.header .gnb-area{
display: flex;
justify-content: space-between;
margin-left: 50px;
width: 100%;
}
</style>플렉스를 쓰다가 justify-content: space-between;가 사용되지 않았는데
처음에는 util-area에 margin-left를 적당한 간격으로 주는 걸로 해결했다.
나중에 알았지만 gnb-area의 width길이가 정해져 있지 않아서 먹히지 않았던 것이다. gnb-area의 부모에 넓이 100%를 준것을 gnb-area의 넓이로 착각한 것 같다.
처음에도 어떻게든 해결은 했지만 좀더 적절한 방향으로 해결하는 쪽이 나을 것 같다.
3.upper버튼
<style>
.footer .upper{
position: fixed;
transition: .5s;
opacity: 0;
left: 50%;
margin-left: 600px;
bottom: -100px;
}
.footer .upper.active{
opacity: 1;
display: block;
bottom: 98px;
}
</style>
<script>
$( '.upper' ).click( function() {
$( 'html, body' ).animate( { scrollTop : 0 }, 400 );
return false;
} );
$(window).scroll(function () {
curr = $(window).scrollTop();
target = $('.header-bottom').offset().top;
if (curr >= target) {
$('.upper').addClass('active')
} else {
$('.upper').removeClass('active')
}
})
</script>이것은 우측하단의 위로가기 버튼이다.
여기서 주의할 점은 position: fixed를 할때 right 수치로 고정하지 않는것이다.
저 수치로 position: fixed;한 후 화면 창을 줄이면 화면의 하단 우측에 고정이 되어 컨텐츠를 가리게 된다.
bottom만 설정한 뒤 화면 50%중앙 아랫쪽에 고정시키고 margin-left: 600px;를 주면 화면을 줄였을 때 중앙값도 같이 줄어들기 때문에 같은 위치에 위로가기 버튼을 둘 수 있다.
스크립트 부분은 upper를 클릭하면 맨 위로 0.4초동안 올라가는 애니메이션을 적용하고, 처음에는 나와있지 않다가 화면 최상단이 header-bottom 에 도달하는 기점으로 active클래스를 붙여 아래에서 위로 나타나게 만들었다.
다음은 참고한 블로그이다.
jQuery / 맨 위로 부드럽게 이동하는 링크 만들기
4.하단 관련사이트 버튼
<ul class="related-list">
<li class="relaterd-item">
<a href="" class="btn-related"><span>직속기관 사업소</span></a>
<ul class="sub-list">
<li><a href="">보건환경연구원</a></li>
<li><a href="">보건환경연구원</a></li>
<li><a href="">보건환경연구원</a></li>
</ul>
</li>
<li class="relaterd-item">
<a href="" class="btn-related"><span>공사 출연기관</span></a>
<ul class="sub-list">
<li><a href="">보건환경연구원</a></li>
<li><a href="">보건환경연구원</a></li>
<li><a href="">보건환경연구원</a></li>
</ul>
</li>
</ul>
<script>
$('.btn-related').click(function (e) {
e.preventDefault();
$(this).next('ul').slideToggle();
//클릭한 btn-related 다음의 ul에 슬라이드토글 기능을 넣는다
$(this).parent('li').siblings('li').children('ul').slideUp();
//클릭한 btn-related의 부모li의 형제li의 자식ul을 슬라이드업 한다(한 메뉴를 열었을때 다른메뉴는 저절로
//닫히게 하기 위한 것)
$(this).toggleClass('active').parent('li').siblings('li').children('a').removeClass('active');
//클릭한 btn-related에 active클래스를 붙이거나 떼고, 부모li의 형제li의 자식a에는 active클래스를 제거한다
//(한 메뉴를 클릭했을때 다른메뉴버튼의 active클래스를 제거하기 위해)
//바탕화면 클릭 시 메뉴 닫히게 설정
$(document).mouseup(function (e){
var sub = $(".relaterd-item");
if(sub.has(e.target).length === 0){
$('.sub-list').hide();
$('.btn-related').removeClass('active')
}
});
</script>아래 글들을 참고하여 수정해 적용했다.
특히 아래 외부영역 클릭 시 메뉴 닫기는 처음에 열리는 메뉴 부분만 (.sub-list) sub에 넣어주었는데, 그러면 정작 메뉴버튼.btn-related을 다시 클릭해도 닫히지 않는다. 메뉴 버튼과 메뉴목록을 전부 포함해야만 닫기가 작동되는 것을 알아서 .relaterd-item를 넣어주는 것으로 수정했다.
아코디언 메뉴 개발
외부영역 클릭 시 레이어팝업 닫기
