WECODE Project 코드 리뷰 #1. 슬라이드

김상웅·2022년 5월 8일

CSS JavaScript html 버튼슬라이드 사이드프로젝트 슬라이드 슬라이드구현

[사이드프로젝트]

목록 보기

1/9

WECODE Project Javscript code reveiw

자기소개 페이지 중 자바스크립트를 활용하여 동적 기능을 구현한 부분에 대해 소개하려고 합니다.
전체 소스코드 확인하기
자기소개 페이지 보기

📚 Slide

첫번째는 슬라이드 기능입니다.
많은 웹사이트에서 버튼을 클릭하여 페이지를 이동하거나, 사진, 항목을 좌우로 넘기는 기능을 사용합니다.
이런 기능을 자기소개 페이지에 적용해봤습니다.

📌 Html Layout

우선 각각 자바스크립트를 활용하여 ul 태그 내부에 li 요소들을 추가하였습니다.
li 태그 자체를 움직이는 것이 아니라, li 요소들을 감싸는 ul 요소 전체를 움직이도록 style을 제어하였습니다.
화살표 이미지 태그는 icons8의 태그를 사용하였습니다.

<div class="slider__wrapper">
  <ul class="expriences__slider">
    <!-- <li class="experience__item">
           <div class="image-box">
             <img src="${item.src}">
              </div>
           <div class="paragraph">
             <h2> ${item.title} </h2>
             <p> ${item.content} </p>
             <p> ${item.description} </p>
           </div>
    	</li> -->
  </ul>
</div>
<div class="btn-group">
  <div class="left-slide-btn btn">
    <img src="icons8의 left arrow" alt="left-arrow"/>
  </div>
  <div class="right-slide-btn btn">
    <img src="icons8의 right arrow" alt="right-arrow"/>
  </div>
</div>

📌 Css Style

자바스크립트를 통해 left 값을 변경시키기 위해서는 해당 태그에 position속성이 지정되어 있어야 합니다.

ul 태그 클래스인 .expriences__slider에 초기 위치를 설정하여주고,
이후 자바스크립트를 통해 left 값을 바꿔주도록 하겠습니다.

.experiences__wrapper .slider__wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}
.experiences__wrapper .expriences__slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 2400px;
  height: 100%;
  display: flex;
  transition: .4s ease;
}
.experiences__wrapper .expriences__slider .experience__item {
  width: 600px;
  height: 100%;
  display: flex;
}

버튼 요소의 css 코드입니다.

.btn-group .btn {
  cursor: pointer;
}
.btn-group .btn img { 
  width: 40px;
  height: 40px;
  background: #ffffff;
  border-radius: 50%;
}
.btn-group left-slide-btn {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%) translateX(-120%);
}
.btn-group right-slide-btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) translateX(120%);
}

📌 Javascript code

우선은 자바스크립트를 통해 동적 기능을 추가할 요소를 선택해줍니다.

sliderBox 슬라이드 기능이 추가되는 ul (".experience slider") 태그를 가리킵니다.
leftBtn 왼쪽 버튼 요소입니다.
rightBtn 오른쪽 버튼 요소입니다.
slideItem ul 태그 내부의 동적으로 추가 된 li (".experience item")을 가리킵니다.

이벤트를 추가해야되는 HTML요소에 접근하여줍니다.

const sliderBox = document.querySelector(".expriences__slider");
const leftBtn = document.querySelector(".left-slide-btn");
const rightBtn = document.querySelector(".right-slide-btn");
const slideItem = document.querySelectorAll(".experience__item");

다음으로는 이벤트를 등록하여 줍니다.

currentIdx slideItem의 인덱스 값을 0으로 초기화합니다. (현재 위치)
slideCount 현재 위치와 비교가 되는 대상으로 이동 범위를 제한합니다.
moveItems(num)
파라미터 num의 값에 따라 slidreBox의 left값에 변화를 주어 슬라이드 기능을 구현하는 함수입니다.
앞서 언급했듯 sliderBox에는 position 속성이 적용되어 있습니다.

const slideCount = slideItem.length; // 4

let currentIdx = 0;

function moveItems(num) {
  // slideItem의 너비가 600px인 점을 이용하여 style 동적 제어
	sliderBox.style.left = `-${num} * 600px`;
	currentIdx = num;
}

leftBtn.onclick = () => {
  // currentIdx가 0보다 커야 왼쪽 버튼이 클릭되지 않도록 지정
	if (currentIdx <= slideCount - 1 && currentIdx > 0) {
		moveItems(currentIdx - 1);
	}
};

rightBtn.onclick = () => {
  // currentIdx가 4이상일 경우 오른쪽 버튼이 클릭되지 않도록 지정
	if (currentIdx < slideCount - 1) {
		moveItems(currentIdx + 1);
	}
};

📌 DOM 접근 메서드

자바스크립트를 통해 HTML 구조와 스타일, 내용 등을 변경하고 관리할 수 있습니다.
이를 위해서는 Html element에 접근을 하여야 하는데 그 방법을 DOM(The Document Object Model)이라고 부릅니다.

document.querySelector(css선택자)
1. id로 접근 시 ("#id")
2. 클래스로 접근 시 (".className")
3. Html요소로 접근 시 (div, button, header...)

document.getElementsByClassName(className)
... class를 가진 요소에 접근하며 (.)을 제외한다.

document.getElementById(id)
... id를 가진 요소에 접근하며 #을 제외한다.

document.querySelectorAll(css선택자)
1. ... 해당 선택자를 가진 모든 요소에 접근한다.
2. 요소는 nodeList 형태로 반환되며, index를 통해 접근이 가능하다.

document.getElementsByTagName(TagName)
1. 태그 이름을 통해 해당 태그에 접근한다.
2. 요소는 nodeList 형태로 반환되며, index를 통해 접근이 가능하다.

다양한 DOM 접근 메서드가 있고, 때에 맞는 메서드를 사용하는 것도 중요합니다.
하지만 class와 id를 번갈아가며 접근하면서 코드의 가독성이 저하되거나 협업 시 혼란을 야기할 수 있을 것 같습니다.
때문에 한가지 메서드로 통일하는 것도 바람직할 것 같다고 생각합니다.

🛠️ 보완해야 할 점

아무래도 슬라이드 버튼이 무한슬라이드가 더 멋져보입니다..
마지막으로 이동했을 때 마지막 리스트의 다음 값이 첫 부분과 연결되면 구현할 수 있을 것 같습니다.
지금 자바스크립트의 데이터를 배우면서 연결리스트라는 것을 배웠는데, 데이터의 마지막 부분이 다시 처음과 연결되는 원형 연결리스트의 성질을 이용하여 구현할 수 있을 것 같습니다.

공부.. 다시 시작!

[참고자료]
https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName