Day18. Background Slider

 

 

 

HTML

<div

class="slide active"

style="

background-image: url('https://images.unsplash.com/photo-1701526474661-78692d537503?q=80&w=2788&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');

"

></div>

 

div 안에 style을 넣은 이유는!? 

이러한 형태의 코드는 주로 이미지 슬라이드 쇼와 같은 경우에 사용. 여러 장의 이미지가 슬라이드로 보여질 때, 각 슬라이드를 나타내는 div 요소에 background-image 속성을 직접 삽입하는 방식.

이 방식을 사용하는 이유는 각 슬라이드가 배경 이미지를 가지고 있으며, 슬라이드 전환 시에는 해당 이미지가 변경되기 때문.

이런 식으로 배경 이미지를 슬라이드의 배경으로 직접 지정하면, HTML 코드에서 간단히 슬라이드를 정의하고 슬라이드의 배경 이미지를 설정.

슬라이드가 단순한 텍스트나 다양한 컨텐츠로 이루어져 있지 않고, 각각이 이미지로 구성되어 있다면, 이렇게 직접 background-image를 사용하는 것이 간편하며 성능에도 일반적으로 큰 영향을 미치지 않는다.

다만, 슬라이드가 복잡한 구조를 가지고 있거나 텍스트, 버튼 등이 포함된 경우에는 보다 의미 있는 요소를 사용하고 그 안에 이미지와 텍스트 등을 포함시키는 것이 더 좋은 구조일 수 있다.

background-image를 사용한 방식:

장점:

1. CSS 스타일링 관리 용이성: 이미지에 대한 스타일링이 CSS에 직접 포함되어 있어서 스타일 관리가 더 편리할 수 있습니다. 여러 슬라이드에 동일한 스타일을 적용하는 데 용이합니다.
2. 배경으로 다양한 콘텐츠 추가: 슬라이드가 단순한 이미지일 때 적합합니다. 다양한 배경 이미지를 사용하면서도 슬라이드 내에 텍스트 등의 다양한 콘텐츠를 추가하기 용이합니다.

단점:

1. 이미지를 위한 요소가 없음: div는 일반적으로 이미지를 위한 요소가 아니기 때문에 스크린 리더(웹 접근성 도구) 등에서 이미지에 대한 정보를 전달하는 데 불편할 수 있습니다.
2. CSS에 직접 포함되기 때문에 유지보수 어려움: 이미지가 많고 슬라이드의 구조가 복잡해지면 CSS에 직접 이미지 경로를 포함하는 것이 유지보수에 어려움을 줄 수 있습니다.

<img> 요소를 사용한 방식:

장점:

1. 의미론적인 측면: <img> 요소는 이미지를 나타내는 의미론적인 요소이기 때문에 웹 접근성 측면에서 더 좋습니다.
2. 다양한 이미지 속성 활용: <img> 요소를 사용하면 alt 속성을 이용하여 이미지에 대한 대체 텍스트를 제공하거나, width, height 등의 속성을 활용하여 이미지를 더 다양하게 제어할 수 있습니다.

단점:

1. 스타일링에 대한 부분: img 태그에 대한 스타일링이 조금 더 제한적일 수 있습니다.
2. CSS와의 분리: 이미지와 관련된 스타일링이 CSS와 분리되어 있어서, 일부 스타일을 동적으로 변경하기가 어려울 수 있습니다.

어떤 방식을 선택할지는 프로젝트의 요구 사항과 편의성에 따라 다르며, 간단한 이미지 슬라이드 쇼와 같은 경우에는 background-image를 사용한 방식이 간편할 수 있습니다.

 

 

<button class="arrow left-arrow" id="left">

<i class="fas fa-arrow-left"></i>

</button>

버튼 폰트어썸 사용

음 클래스명이 외워지고 있다.

 

 

CSS

.slide {

opacity: 0;

height: 100vh;

width: 100vw;

background-position: center center;

background-size: cover;

position: absolute;

top: -15vh;

left: -15vw;

transition: 0.4s ease;

z-index: 1;

}

.left-arrow {

left: calc(15vw - 65px);

}

.right-arrow {

right: calc(15vw - 65px);

}

 

슬라이더가 100을 기준으로 하고 위에서 -15 왼쪽에서 -15에 위치한다. 즉 상하좌우 각각 15씩 갖고 있음. 

.left-arrow {

left: calc(15vw - 70px);

}

.right-arrow {

right: calc(15vw - 70px);

}

픽셀 값을 키우면 좌측 우측 각각의 방향으로 더 가까워 진다. 

 

JS

const body = document.body;

const slides = document.querySelectorAll('.slide');

const leftBtn = document.getElementById('left');

const rightBtn = document.getElementById('right');

 

클래스 body를 변수 body에 할당

클래스 slide를 변수 slides에 할당 

querySelectAll을 사용 했으므로 클래스를 불러올 수 있게 ('.') 점을 넣어준다. 그럼 .slide 라는 클래스명을 가진 모든 것을 slides에 할당

클래스 left 를 변수 leftBtn 할당

클래스 right를 변수 rightBtn 할당

 

let activeSlide = 0;

activeSlide의 초기값을 0으로 설정한다. 인덱스의 0 가장 처음 페이지.

 

rightBtn.addEventListener('click', () => {

activeSlide++;

if (activeSlide > slides.length - 1) {

activeSlide = 0;

}

setBgToBody();

setActiveSlide();

});

 

rightBtn.addEventListener('click', () => {}

rightBtn에 이벤트리스너 연결.

클릭시 {} 안의 내용 실행.

activeSlide++; 

activeSlide의 값을 증가 시켜준다. 증감연산자 사용 초기값은 0.

0 to 1 to 2 to 3.

if (activeSlide > slides.length - 1) {

activeSlide = 0;

}

이미지 슬라이드 쇼에서 다음 슬라이드로 이동할 때, 현재의 활성화된 슬라이드가 슬라이드의 마지막 슬라이드인 경우, 다시 첫 번째 슬라이드로 이동.

마지막 슬라이드의 인덱스는 slides.length - 1

activeSlide = 0

조건이 참이라면, activeSlide 변수를 0으로 설정하여 첫 번째 슬라이드로 이동.

마지막 슬라이드가 무한 루프로 동작할 수 있게. 마지막 슬라이드 도달시 첫 번째 슬라이드로 무한히 반복.

 

leftBtn.addEventListener('click', () => {

activeSlide--;

if (activeSlide < 0) {

activeSlide = slides.length - 1;

}

setBgToBody();

setActiveSlide();

});

 

activeSlide--; 

초기 값 0에서 뒤로 

0보다 작으면 

 

 

 

setBgToBody();

 

버튼 이벤트 작동 이후로 setBgToBody() 함수 실행

버튼이벤트 안에 setBgToBody()까지 같이 실행이 되는데 중간에 setBgToBody()가 있는 이유.

처음 이 페이지가 렌더링되고 setBgToBody() 함수까지 같이 실행해서 적용되게 하게 위함.

만약 setBgToBody()를 호출 해놓지 않고 버튼 안에서만 호출한다면 초기 로딩시에 배경화면은 default 값으로 되어 있고 버튼 누를 때 같이 바뀐다.

 

function setBgToBody() {

body.style.backgroundImage = slides[activeSlide].style.backgroundImage;

}

 

body.style.backgroundImage = slides[activeSlide].style.backgroundImage;

body.style.backgroundImage = slides[0].style.backgroundImage 

idx 값을 ++ 하거나 -- 함으로써 img를변경하는 함수

 

function setActiveSlide() {

slides.forEach((slide) => slide.classList.remove('active'));

slides[activeSlide].classList.add('active');

}

 

slides.forEach((slide) => slide.classList.remove('active'));

const slides = document.querySelectorAll('.slide');

위에 가져온 slides를 forEach를 사용해서 iteration 하고 slide에 classList를 remove 한다. remove 할 내용은 'active' 

 

그리고

slides[activeSlide].classList.add('active');

다시 'active'를 add 한다.

 

remove하고 add 하는 이유. 

class="slide active"

 

첫 페이지에 active를 부여하고 시작했기 때문이다.

active를 삭제하면 빈 slide가 노출되나 배경에는 앞에서 언급했듯

setBgToBody();

을 호출해놓은 상태이므로 배경은 부여받고 활성화 되어있다. 

 

LOGIC

배경화면과 슬라이더에 동일한 사진을 채워준다.

좌우 버튼을 눌러서 슬라이더의 사진과 배경의 사진을 바꿔준다. 

각각의 사진에 인덱스 값을 부여해서 한 방향으로 진행되어도 연속성을 갖게 한다. 

반대로 눌러도 같은 방식으로 구동되게 한다. 

 

 

RECAP

이벤트리스너, 배열함수, 증감

slide, carousel