리뷰 캐러셀 만들기

 

만드는 방법에 대해서 전체적으로 설명하기보다는 가장 핵심적인 코드와 내가 배웠던 부분에 대해서만 다루어 보겠다.

요즘 react강의와 js프로젝트를 병행하고 있는데 확실히 react를 사용하는게 편하다는 것을 느끼게된다.

 

핵심적 코드

데이터를 배열에 객체형태로 담아서 그것을 활용해서 리뷰 캐러셀을 만드는 것이 핵심이라고 생각했다.

 

html에서 이렇게 만들고

// HTML

<div id="profile">
  <div id="bookmark"><img src="./img/bookmark.svg" /></div>
  <img id="person_img" />
  <div id="author"></div>
  <div id="job"></div>
  <div id="info"></div>
</div>

 

JS에서 getElementById를 통해서 셀렉터를 만들어준다.

const img = document.getElementById("person_img");
const author = document.getElementById("author");
const job = document.getElementById("job");
const info = document.getElementById("info");
const bookmark = document.getElementById("bookmark");

 

리뷰 캐러셀에 들어갈 데이터를 배열과 객체를 이용해서 만들어주고

// JS

let data = [
  {
    id: 0,
    img: "./img/0.jpg",
    author: "Christian",
    job: "WEB DEVELOPER",
    info: `저는 창의적인 문제 해결과 협업을 통해 혁신적인 소프트웨어를 개발하는
  개발자입니다. 다양한 프로젝트 경험을 통해 빠르게 적응하며 지속적인
  성장을 추구하며, 사용자 중심의 사용하기 편리한 솔루션을 만들기 위해
  노력합니다.`,
  }
 ,
 .....
 ]

 

 

textContent를 이용해서 함수를 만들어 넣어주면된다

textContent는 태그의 content를 넣어주는 역할을 해준다.

showPerson함수의 매개변수에 0을 넣어주면 data의 첫번째 객체를 가져와 리뷰캐러셀을 만들어주고,

1을 넣어주면 두번째 객체를 가져와 리뷰캐러셀을 만들어준다.

let currentItme = 0;

function showPerson(person) {
  const item = data[person];
  author.textContent = item.author;
  job.textContent = item.job;
  info.textContent = item.info;
  img.src = item.img;
}

showPerson(currentItme);

 

오른쪽 왼쪽 버튼은 

currentItem에 +1 또는 -1해주면 끗

//왼쪽 버튼
leftBtn.addEventListener("click", function () {
  if (currentItme !== 0) {
    currentItme -= 1;
    showPerson(currentItme);
  }
});
//랜덤
randomBtn.addEventListener("click", function () {
  let randomNumber = Math.floor(Math.random() * data.length);
  showPerson(randomNumber);
});

 

 

배운 부분

이미지 넣는법

<img  src="./0.jpg" />이런식으로 넣는법만 생각하고 있었는데 

JS를 통해서 넣는법이 익숙하지 않아서 헤맸다.

 

data에 img src를 넣고

셀렉터를 만든다음

img.src를 통해서 넣었다.

//data
let data = [
  {
    id: 0,
    img: "./img/0.jpg",
    author: "Christian",
    job: "WEB DEVELOPER",
    info: `저는 창의적인 문제 해결과 협업을 통해 혁신적인 소프트웨어를 개발하는
  개발자입니다. 다양한 프로젝트 경험을 통해 빠르게 적응하며 지속적인
  성장을 추구하며, 사용자 중심의 사용하기 편리한 솔루션을 만들기 위해
  노력합니다.`,
  },
  ...]
  
//셀렉터
const img = document.getElementById("person_img");

//src 속성넣기
img.src = item.img;

 

글밑에 선긋기

요 파란선이 생각보다 어려웠다.

 

:after사용해서

content에 빈값을 넣고

display: block;까지 해줘야 내 생각대로 선이 들어갔다.

 

이걸 안해주면 선이 안생기거나 왼쪽에 붙어버린다.

// scss

.title {
  font-size: 32px;
  display: flex;
  flex-direction: column;
  h1:after {
    content: "";
    display: block;
    width: 100px;
    border: 2px solid #58acdb;
    margin: 10px auto;
  }
}

 

사진 비율이 이상해짐

width와 height만 설정했더니 비율이 이상해졌다.

그냥 넘어가려고 했는데 계속 보니깐 불편해서 검색을 해보았다.

 

이걸 넣으니깐 해결이 되었다.

object-fit: cover;

 

🌟 이미지 사이즈 비율 맞추는 3가지 방법 (object-fit / background-size / position)