2023년 웹디자인 기능사 슬라이드 : S-5
소개
안녕하세요! 웹스토리보이입니다. 반응형 이미지 슬라이드 S-5 유형입니다. 이번 유형은 S-2 유형과 유사하지만, 반응형으로 작업하기 위해서는 가로 값을 퍼센트로 설정해야 하고, 이미지는 백그라운드로 처리하는 것이 포인트입니다. 그래서 S-2 유형을 어느 정도 이해했다면 이번 유형도 쉽게 할 수 있을겁니다. 그럼 시작해보겠습니다.
1. 구조 잡기
이번에도 E-1 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다.
<body>
<div id="wrap">
<main id="main">
<header id="header">
<h1></h1>
<nav></nav>
</header>
<!-- //header -->
<section id="contents">
<div class="banner"></div>
<div class="notice"></div>
<div class="gallery"></div>
<div class="link"></div>
</section>
<!-- //contents -->
<article id="slider">
</article>
<!-- //slider -->
</main>
<!-- //main -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2">
<div class="footer2-1"></div>
<div class="footer2-2"></div>
</div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
}
#main {
width: 100%;
height: calc(100vh - 120px);
background-color: #efefef;
display: flex;
}
#header {
width: 200px;
height: 100%;
}
#header h1 {
width: 100%;
height: 10%;
background-color: #e3e3e3;
}
#header nav {
width: 100%;
height: 90%;
background-color: #d9d9d9;
}
#contents {
width: 400px;
height: 100%;
}
#contents .banner {
width: 100%;
height: 15%;
background-color: #d1d1d1;
}
#contents .notice {
width: 100%;
height: 35%;
background-color: #c7c7c7;
}
#contents .gallery {
width: 100%;
height: 35%;
background-color: #bcbcbc;
}
#contents .link {
width: 100%;
height: 15%;
background-color: #b1b1b1;
}
#slider {
width: calc(100% - 600px);
height: 100%;
background-color: #a3a3a3;
}
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 120px;
background-color: #9d9d9d;
}
#footer .footer2 {
width: 80%;
}
#footer .footer2 .footer2-1 {
width: 100%;
height: 60px;
background-color: #929292;
}
#footer .footer2 .footer2-2 {
width: 100%;
height: 60px;
background-color: #838383;
}
이미지 슬라이드 영역을 작업했습니다.
기존과 다르게 img 태그를 쓰지 않고, 글씨만 나오도록 했습니다.
<article id="slider">
<div class="sliderWrap">
<div class="slider s1">
<span>이미지1</span>
</div>
<div class="slider s2">
<span>이미지2</span>
</div>
<div class="slider s3">
<span>이미지3</span>
</div>
</div>
</article>
<!-- //slider -->
우선 이미지를 좌로 이동하기 때문에 이미지는 가로로 정렬이 되어 있어야 합니다.
이미지 슬라이드 제일 상위 영역에 overflow: hidden; 설정하여 넘치는 부분은 보이지 않도록 했습니다.
첫 번째 이미지를 복사하여 마지막에 넣을 것이기 때문에 가로 값을 width: 400%;로 설정해야 구조가 깨지지 않습니다.
이 부분을 조심해야 합니다.
각각의 이미지에는 width: 100%;, height: 100%;을 설정하고,
백그라운드 이미지는 전체 영역에 맞게 cover로 설정하고,
이미지를 가운데로 정렬하기 위해서 background-position: center;를 설정합니다.
이미지는 한번만 나올 수 있도록 no-repeat를 설정하면 됩니다.
/* slider */
#slider {
overflow: hidden;
}
.sliderWrap {
width: 400%;
height: 100%;
display: flex;
}
.sliderWrap .slider {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.sliderWrap .slider.s1 {
background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider04.jpg);
}
.sliderWrap .slider.s2 {
background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider05.jpg);
}
.sliderWrap .slider.s3 {
background-image: url(https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider06.jpg);
}
.sliderWrap .slider span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255,255,255,0.4);
padding: 10px 20px;
}
2. 스크립트 작업 : 제이쿼리
반응형을 위해 퍼센트로 움직일 수 있도록 marginLeft 값을 퍼센트로 움직일 수 있도록 변경했습니다.
S-2 유형과는 이 부분을 제외하고 나머지는 동일합니다.
그래도 간단하게 설명은 하고 넘어가겠습니다.
첫 번째 이미지를 복사하여 마지막에 넣어주시고,
현재 이미지 값을 1씩 증가합니다.
$sliderWrap을 왼쪽으로 100%씩 옮기도록 설정하고,
마지막에 왔을 때 애니메이션을 정지하고, 현재 이미지를 0으로 초기화 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
let currentIndex = 0; //현재 이미지
$(".sliderWrap").append($(".slider").first().clone(true)); //첫번째 이미지를 복사해서 마지막에 추가
setInterval(() => {
currentIndex++; //혅재 이미지를 1씩 추가
$(".sliderWrap").animate({marginLeft: -100 * currentIndex + "%"}, 600); //이미지 애니메이션
if(currentIndex == 3){ //마지막 이미지
setTimeout(() => {
$(".sliderWrap").animate({marginLeft: 0}, 0); //애니메이션 정지
currentIndex = 0; //현재 이미지 초기화
}, 700);
}
}, 3000);
});
</script>
3. 스크립트 작업 : 자바스크립트
자바스크립트 역시 S-2 유형과 동일하고 %로 설정하여 이동시켰습니다.
간단하게 설명하면,
이미지 전체 영역 sliderWrap을 설정하고, 각각의 이미지 slider를 설정합니다.
slider는 여러개 있으니 querySelectorAll로 선택하였습니다.
첫 번째 이미지를 복사하고 마지막 위치에 넣었습니다.
애니메이이션 효과를 주기 위해서 transition 효과를 넣어주고,
marginLeft를 통해 이동시켰습니다.
이미지가 마지막에 왔을 때 애니메이션을 순간 정지하고 위치값을 0으로 초기화 했습니다.
window.onload = function(){
let currentIndex = 0; //현재 이미지
const sliderWrap = document.querySelector(".sliderWrap"); //전체 이미지 설정
const slider = document.querySelectorAll(".slider"); //각각의 이미지
const sliderClone = sliderWrap.firstElementChild.cloneNode(true); //첫번째 이미지를 저장
sliderWrap.appendChild(sliderClone); //이미지 마지막 영역에 추가
setInterval(() => { //3초에 한번씩 실행
currentIndex++; //현재 이미지를 1씩 추가
sliderWrap.style.transition = "all 0.6s"; //애니메이션 효과 추가
sliderWrap.style.marginLeft = -currentIndex * 100 + "%"; //왼쪽으로 100%씩 이동
if(currentIndex == slider.length){
setTimeout(() => {
sliderWrap.style.transition = "0s"; //애니메이션 효과 정지
sliderWrap.style.marginLeft = "0"; //이미지 위치를 초기화
currentIndex = 0; //현재 이미지를 초기화
}, 700);
}
}, 3000);
};
3. 마무리
5번째 이미지 슬라이드 유형입니다. 반응형이긴 하지만 S-2 유형과 비슷합니다. 반응형 부분만 CSS로 설정 스크립트에서 %로만 바꾸어 주면 끝납니다. 그렇게 어렵진 않죠^^ 😊 그래도 혹시 모르니까! 잘 살펴보고 외워주세요!
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글