2023년 웹디자인 기능사 슬라이드 : S-3
소개
안녕하세요! 웹스토리보이입니다. 마지막 이미지 슬라이드입니다. 이번 유형은 두번째 유형과 똑같습니다. 이미지가 좌에서 위로 움직이는 것 빼고는 똑같습니다. 이 부분은 몇 가지만 바꾸면 구현이 되기 때문에 두번째 유형을 완벽하게 이해했다면, 응용해서 작업할 수 있는 유형입니다. 저랑 같이 하기 전에 먼저 해보시는 것을 추천합니다. 그럼 시작해볼까요? 🫢
1. 구조 잡기
이번에는 A-2 유형의 레이아웃을 사용하겠습니다. 레이아웃을 그대로 복사하셔서 사용하셔도 됩니다.
<body>
<div id="wrap">
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- //header -->
<article id="slider">
</article>
<!-- //slider -->
<main id="contents">
<section class="content1"></section>
<section class="content2"></section>
<section class="content3"></section>
</main>
<!-- //contents -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 20%;
height: 100px;
background-color: #efefef;
}
#header .nav {
width: 80%;
height: 100px;
background-color: #e3e3e3;
}
#slider {
width: 100%;
height: 300px;
background-color: #d9d9d9;
}
#contents {
width: 100%;
display: flex;
}
#contents .content1 {
width: 33.3333%;
height: 200px;
background-color: #d1d1d1;
}
#contents .content2 {
width: 33.3333%;
height: 200px;
background-color: #c7c7c7;
}
#contents .content3 {
width: 33.3333%;
height: 200px;
background-color: #bcbcbc;
}
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #b1b1b1;
}
#footer .footer2 {
width: 60%;
height: 100px;
background-color: #a3a3a3;
}
#footer .footer3 {
width: 20%;
height: 100px;
background-color: #9d9d9d;
}
이번에는 슬라이드 영역을 작업해보겠습니다.
이미지는 3장이 있다고 가정을 하고 이미지와 글씨를 보여줄 부분을 작업하였습니다.
img 태그를 작성할 때에는 alt 속성을 꼭 적어주셔야 합니다.
웹 표준을 준수하기 위한 가장 기본 규칙이며, 만약 이미지가 없을 때 대체 문자가 나오는 부분입니다.
시험지에 웹 표준을 준수하라고 명시되어 있기 때문에 이런 부분이 없다면, 감정 요인일 것입니다.
<article id="slider">
<div class="sliderWrap">
<div class="slider s1">
<img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider01.jpg" alt="이미지 설명">
<span>이미지1</span>
</div>
<div class="slider s2">
<img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider02.jpg" alt="이미지 설명">
<span>이미지2</span>
</div>
<div class="slider s3">
<img src="https://webstoryboy.github.io/webstoryboy/w_webd/slider/slider03.jpg" alt="이미지 설명">
<span>이미지3</span>
</div>
</div>
</article>
<!-- //slider -->
이미지는 세로로 정렬할 것이기 때문에 특별히 할 것이 없습니다.
원래 이미지는 세로로 정렬이 되니깐요!
하지만 여기서 중요한 점은 이미지에 간격이 생기는 현상을 막아야 합니다.
이미지는 인라인 구조이기 때문에 보이지 않는 폰트 크기, 간격 등이 생깁니다.
그래서 블록구조로 변경하거나 폰트사이즈를 0으로 설정하면 해결이 되지만
vertical-align: top; 이 방법을 제일 많이 사용하니깐,
이렇게 설정할께요~ 그러면 간격이 없어지기 때문에 이미지가 일정한 간격으로 이동하게 됩니다.
저기서 틀리는 분들도 많더라구요! 주의해주세요!
/* slider */
#slider {
overflow: hidden;
}
.sliderWrap .slider {
position: relative;
}
.sliderWrap .slider img {
vertical-align: top;
}
.sliderWrap .slider span {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0,0,0,0.3);
color: #fff;
padding: 10px 20px;
}2. 스크립트 작업 : 제이쿼리
이미지의 이동이 왼쪽에서 위쪽으로 움직이기 때문에
이미지의 가로 값이 아닌 $slider.height()을 구합니다.
첫 번재 이미지를 복사해서 마지막에 넣어주는 부분은 동일합니다.
이미지를 위쪽으로 움직이기 때문에 애니메이션에 marginTop을 설정합니다.
그리고 이미지가 마지막에 왔을 때 애니메이션을 정지하고 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(function(){ //3초에 한번씩 실행
currentIndex++; //현재 이미지를 1씩 증가
$(".sliderWrap").animate({marginTop: -currentIndex * 300 + "px"}, 600); //이미지 애니메이션
if(currentIndex == 3){ //마지막 이미지
setTimeout(function(){
$(".sliderWrap").animate({ marginTop:0 }, 0); //애니메이션 초기화
currentIndex = 0; //현재 이미지를 초기화
}, 700)
}
}, 3000);
});
</script>
3. 스크립트 작업 : 자바스크립트
원리는 동일합니다. 첫번째 이미지를 복사해서 마지막에 넣어주고, 이미지가 마지막이 됐을 때, 애니메이션 정지하고, 초기화하면 됩니다.
주의할 점은 이미지가 세로로 여백없이 정렬되어 있어야 합니다. 이 부분은 CSS에서 완벽하게 하고 와야 합니다.
현재 이미지를 0으로 초기화하고 전체 이미지와 각각의 이미지를 변수에 저장합니다.
첫번째 이미지의 높이값(offsetHeight) 구하고 첫번째 자식(firstElementChild) 이미지를 복사(cloneNode(true))합니다.
복사한 이미지는 마지막에 위치하도록 합니다.
일정한 간격으로 실행하는 setInterval()을 작성하고 현재 이미지 값을 1씩 증가합니다.
애니메이션을 주기 위해 all 0.6s을 설정하고 위쪽으로 움직이기 위해 translateY를 설정합니다.
현재 이미지와 이미지 갯수가 같을 때 transition을 0으로 초기화 하고 translateY도 0으로 초기화 합니다.
당연히 현재 이미지도 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.marginTop = -currentIndex * 300 + "px"; //이미지 이동
if(currentIndex == slider.length){ //마지막 이미지
setTimeout(() => {
sliderWrap.style.transition = "0s"; //애니메이션 정지
sliderWrap.style.marginTop = "0"; //이미지 위치 초기화
currentIndex = 0; //현재 이미지 초기화
}, 700);
}
}, 3000);
}
3. 마무리
세번째 이미지 슬라이드도 끝났습니다. 두번째 이미지 슬라이드 복습편이라고 생각하면 되겠죠! 이미지 슬라이드를 못하면 나머지를 잘해도 무조건 떨어지기 때문에 꼭 구현해야 합니다. 기본 원리를 생각하고, 스크립트를 하나씩 작업하면 될겁니다. 그래도 안되면 그냥 100번 쓰세요! 그럼 됩니다. 기준점이 생기는 스크립트가 있으면, 나중에 변형해서 자유롭게 쓸 수 있거든요! 코딩하는 분들한테는 도움이 될겁니다. 제가 그랬거든요! 이미지 슬라이드를 완벽하게 코딩하게 되면 나머지도 변형 및 응용이 가능합니다. 쓰는 것만 계속 쓰게 되거든요! 웹디기에서 나오는 이미지 슬라이드는 정말 기초구요! 좀 더 깊이 하고 싶은 분들은 여기에 버튼, 닷 메뉴, 자동 플레이 같은 기능도 붙여서 작업하면 더 도움이 됩니다. 수고하셨습니다. 😏
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글