2023년 웹디자인 기능사 슬라이드 : S-4
소개
안녕하세요! 웹스토리보이입니다. 웹디자인기능사의 하이라이트 이미지슬라이드 반응형 S-4 유형입니다. 이번에 반응형 레이아웃이 새롭게 생기면서 이미지 슬라이드도 반응형에 맞추어서 작업을 해야 합니다. 하지만 시험지에는 반응형으로 이미지 슬라이드를 구현하시오! 라는 내용이 없습니다. 그래서 이미지를 적절하게 포토샵에서 자른 후 반응형이 아닌 대충 크기를 맞추어도 상관이 없을 듯합니다. 이 부분은 저도 자세히 모르니 여러분이 시험을 보시고 옳은 정보를 알려주시면 감사하겠습니다. 제 생각에는 반응형으로 이미지 슬라이드를 구현하는게 맞다고 생각하여 만들었습니다. 선택은 여러분이 하시면 될 거 같습니다.
반응형 이미지 슬라이드를 구현하기 위해서는 이미지를 백그라운드로 처리해야 합니다.
기존 슬라이드는 img태그로 이용하여 작업했지만, 반응형으로 처리하기 위해서는 background로 처리하는게 좋습니다.
기존 스크립트 소스를 많이 변형하지는 않고 CSS를 설정하면 작업할 수 있지만, 완벽한 반응형을 처리하기에는 조금 애로사항들이 있습니다.
그런 부분까지 출제 위원들이 고려해서 작업을 했는지는 의문이 듭니다.
어째든 시작해봅시다! 😜
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 -->
이미지는 하나로 합쳐주기 위해서 position을 사용하였고,
모든 이미지를 숨기고 첫 번째 이미지만 나오도록 하였습니다.
백그라운드 이미지를 불러오고 이미지 사이즈를 화면에 맞추도록 background-size: cover;를 사용하였고,
가운데로 위치하기 위해서 background-position: center;를 사용했습니다.
글씨는 가운데로 오기 위해서 position: absolute를 주었습니다.
/* slider */
.sliderWrap {
position: relative;
height: 100%;
}
.sliderWrap > div {
display: none;
}
.sliderWrap > div:first-child {
display: block;
}
.sliderWrap .slider {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.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. 스크립트 작업 : 제이쿼리
소스는 다행이도 S-1 유형과 똑같습니다.
S-1 유형을 이해하거나, 외웠으면 S-4 유형은 CSS만 설정하면 끝납니다.
그래도 간단하게 설명을 드리면,
현재 이미지 currentIndex = 0을 설정하고,
모든 슬라이드를 변수에 저장을 하였습니다.
일정한 간격으로 실행을 하기 위해서 setInterval()을 설정하고,
다음이미지는 현재 이미지에 1을 추가하여 설정했습니다.
이미지를 무한으로 설정하기 위해 이미지 총 갯수만큼 나누고 나머지 값을 nextIndex에 저장하였습니다.
그러면 nextIndex 변수에는 1 2 0 1 2 0 1 2... 이렇게 무한 반복하게 되고,
슬라이드에 넣어주면 됩니다.
마지막으로 nextIndex의 값을 currentIndex에 저장하면 1씩 증가되는 효과가 발생됩니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
let currentIndex = 0; //현재 이미지 설정
setInterval(() => { //3초마다 실행
let nextIndex = (currentIndex + 1) % 3 // 1 2 0 1 2 0 1 2 0
$(".slider").eq(currentIndex).fadeOut(1200); //첫 번째 이미지 숨김
$(".slider").eq(nextIndex).fadeIn(1200); //두번째 이미지 나타남
currentIndex = nextIndex; //두번째 이미지 값을 현재 이미지에 저장
}, 3000);
</script>
3. 스크립트 작업 : 자바스크립트
자바스크립트 작동하기 위해서는 애니메이션이 구현되어야 하기 때문에 다음의 CSS를 제거할 것입니다. 그리고 저 부분은 자바스크립트로 처리하겠습니다.
.sliderWrap > div {
display: none;
}
.sliderWrap > div:first-child {
display: block;
}
모든 이미지를 querySelectorAll를 통해 선택하고, forEach를 통해, 투명도를 0으로 설정합니다.
첫번째 이미지한테만 투명도를 1로 설정했습니다.
일정한 간격으로 실행하기 위해 setInterval()을 설정하고, 다음 이미지는 현재 이미지에 1을 추가하여 설정합니다.
첫번째 이미지는 투명도 0을 주고 다음 이미지는 투명도를 1을 줍니다.
이때 transition을 주면 애니메이션이 되고,
다음 이미지 변수 값을 현재 이미지 변수 값에 넣어주면 1씩 증가되는 효과가 생깁니다.
window.onload = function(){
let currentIndex = 0; //현재 이미지
const slider = document.querySelectorAll(".slider"); //각각의 이미지들
slider.forEach(el => el.style.opacity = "0"); //모든 이미지 투명도 0
slider[0].style.opacity = 1; //첫번째 이미지는 투명도 1
setInterval(() => {
let nextIndex = (currentIndex + 1) % slider.length; //다음 이미지
slider[currentIndex].style.opacity = "0"; //첫번째 이미지를 숨김
slider[nextIndex].style.opacity = "1"; //두번째 이미지 나타남
slider.forEach(el => el.style.transition = "all 1s"); //이미지 애니메이션 추가
currentIndex = nextIndex; //두번째 값을 현재 이미지에 저장
}, 3000);
}
3. 마무리
반응형 이미지 슬라이드를 마무리했습니다. 이번 유형은 비교적 쉬운 편으로 소스는 동일하고 CSS 설정만 약간 다릅니다. 시험 보실때 유의하시고 보시면 될 거 같습니다. 만약 반응형까지 힘들다면 그냥 S-1 유형으로 구현하고 나오셔도 됩니다. 조금은 감점이 되겠지만 60점만 넘으면 되니 크게 상관없을 거 같습니다. 대신 구현은 되야 합니다. 수고하셨습니다.🤩
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글