Day4 - wjddnjswjd12/fe-w3-shopping GitHub Wiki
์ค๋ ๊ทธ๋ฃน ํผ์ด์ธ์
์์ ๋ฉค๋ฒ๋ถ๋ค์ด transitionend๋ฅผ ์ฌ์ฉํด์ผํ๋ค๊ณ ์๋ ค์ฃผ์
์...!
์ ์ ๋ง๋ค์ด๋ ์ผ๋งค ์บ๋ก์
์ ์น ๊ฐ์์๊ณ ์๋ก ๋ง๋ค์์ต๋๋ค..ใ
ใ
๋์ ํ ๊ฐ์ด ์์กํ์ ๋ฐ๋ก ์ฐ์ต์ฉ์ผ๋ก ํ์ผ์ ๋ง๋ค์ด์ ๊ตฌํํด๋ดค์ต๋๋น...
์ฐ์ html ์ฝ๋์ css๋ ์ด๋ฐ ์ํ๋ก ์์ํ์ต๋๋ค:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Transition Practice</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="slide_box">
<div class="slide_list">
<div id="lastClone" class="slide_item">5</div>
<div class="slide_item">1</div>
<div class="slide_item">2</div>
<div class="slide_item">3</div>
<div class="slide_item">4</div>
<div class="slide_item">5</div>
<div id="firstClone" class="slide_item">1</div>
</div>
</div>
<button class="prevBtn">prev</button>
<button class="nextBtn">next</button>
<script src="transition.js"></script>
</body>
</html>
.slide_box {
margin: 500px 0 0 700px;
border: rgb(255, 14, 135) 3px dotted;
width: 100px;
height: 100px;
/* overflow: hidden; */
}
.slide_item {
background-color: rgb(255, 215, 187);
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
font-size: larger;
border: rgb(165, 165, 165) 0.5px solid;
}
.slide_list {
width: 900px;
display: flex;
height: 100px;
}
button {
margin-left: 610px;
}
์ฐ์ต์ฉ์ด๋ผ css๋ฅผ ๋์ถฉ ์ง์ ํ์ต๋๋ค..๐
์ผ๋จ slide_box์ overflow:hidden์ ์ฃผ์ง ์๊ณ ์งํ์ด ์ด๋ป๊ฒ๋๋ ํ์ธํ๋ฉด์ ์์ํ์ต๋๋ค.
overflow:hidden์ ์ฃผ๋ฉด,
์ด๋ ๊ฒ slide_box์์น๋ง ๋ฎ! ํ๊ณ ๋ณด์
๋๋ค..!!
transition์ ์ค ๋ ์์ฐ์ค๋ฝ๊ฒ ๋์ด๊ฐ๊ฒ ํ๊ธฐ ์ํด์ ๋ง์ง๋ง ์ฌ๋ผ์ด๋์ธ 5๋ฒ์ ์์ ์ถ๊ฐํ๊ณ ,
๋งจ ์์ 1๋ฒ ์ฌ๋ผ์ด๋๋ฅผ ๋งจ ๋ค์ ํ๋ ์ถ๊ฐํ์ต๋๋ค.
๋์ค์ javascript ์ฝ๋ ์ค๋ช
๋ ๋ ์ฝ๊ฒ ์์์์ง๋ง,
translateX()๋ก ํ ์ฌ๋ผ์ด๋ ํฌ๊ธฐ๋น ์์ง์ด๋ค๊ฐ, ๋ง์ง๋ง 5๋ฒ ์ฌ๋ผ์ด๋์ ๋ค๋ค๋ฅด๋ฉด
๋ค์ ๋งจ ์์ผ๋ก ์ด๋์์ผ์ผํ๋๋ฐ, ์ด๋ ์์ผ๋ก ๋๊ธฐ๋๊ฑฐ๋ณด๋ค ์๋ฃจ๋ฃฉ ํ๊ณ ์์ผ๋ก ์ด๋ํ๋?๋๋์ด ๋ค์ด์ ์ด๊ฑธ ์ด๋ป๊ฒ ํด๊ฒฐํ๋ ์ถ์์ต๋๋ค.
๊ทธ๋์ ์ฐธ๊ณ ํ ๋์์์ ๋ณด๋ ์ ๋ ๊ฒ ๋ง์ง๋ง์ฌ๋ผ์ด๋์ ์ฒซ๋ฒ์งธ์ฌ๋ผ์ด๋๋ฅผ ๋์ ์ถ๊ฐํ๊ณ js์ฝ๋๋ก ์ด์ฐ์ด์ฐ ์ค์ ์ ํ๋ฉด ์์ฐ์ค๋ฝ๊ฒ ๋์ด๊ฐ๊ฒ ํ ์ ์์ต๋๋ค.
์ด์ js์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉด,
const carouselSlide = document.querySelector(".slide_list");
const carouselContents = document.querySelectorAll(".slide_item");
const prevBtn = document.querySelector(".prevBtn");
const nextBtn = document.querySelector(".nextBtn");
//counter
let counter = 1;
const size = carouselContents[0].clientWidth;
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
์ผ๋จ document.querySelector์ ์ฌ์ฉํ์ฌ js์ฝ๋ ํ์ํ ์์๋ค์ ๋ถ๋ฌ์ค๊ณ ,
๋ช๋ฒ์งธ slide์ ์์๋์ง๋ฅผ(index๊ฐ๋ ) ์์์๋๋ก counter์ ๋ง๋ค์์ต๋๋ค.
counter์ 1์ ์ค ์ด์ ๋ html๊ตฌ์กฐ์ 5->1->2->3->4->5->1 ์ด๋ ๊ฒ ๋์ด์๊ธฐ์,
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
์ด ์ฝ๋๋ฅผ ํตํด์ ์ผ์ชฝ์ผ๋ก ์ฌ๋ผ์ด๋ width๋งํผ ์ฌ์ ์ ๋จผ์ ์์ง์ฌ์ค๋๋ค.
๊ทธ๋ผ ์ด๋ฐ ์ํฉ์ด ๋ฉ๋๋ค.
๋๋จธ์ง ์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉด,
//Button Listeners
nextBtn.addEventListener("click", () => {
if (counter >= carouselContents.length - 1) return;
carouselSlide.style.transition = "transform 0.3s ease-in-out";
counter++;
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
});
prevBtn.addEventListener("click", () => {
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.3s ease-in-out";
counter--;
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
});
console.log(carouselContents.length);
์ด์ ๋ฒํผ, ๊ทธ๋ฆฌ๊ณ ๋ค์๋ฒํผ์ ํด๋ฆญ์ด๋ฒคํธ๋ฅผ ๋ฌ์์ฃผ๋ ์ฝ๋์
๋๋ค.
if (counter >= carouselContents.length - 1) return;
์ด ์ฝ๋์ if (counter <= 0) return;
์ด ์ฝ๋๋ฅผ ๋ฌ๊ฒ๋ ์ด์ ๋ ๋์ค์ ์์ธํ ์ค๋ช
ํ๊ฒ ์ต๋๋ค.
(-size*counter) ๋งํผ์ด ์ผ์ชฝ์ผ๋ก ์ด๋ํ๋ ๊ธธ์ด์
๋๋ค.
carouselSlide.addEventListener("transitionend", function () {
if (carouselContents[counter].id === "lastClone") {
carouselSlide.style.transition = "none";
counter = carouselContents.length - 2;
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
}
if (carouselContents[counter].id === "firstClone") {
carouselSlide.style.transition = "none";
counter = carouselContents.length - counter;
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
}
});
์๊ธฐ๊ฐ ๋๋ง์ transitionend๋ฅผ ์จ๋ณธ ์ฝ๋์ธ๋ฐ...
if (carouselContents[counter].id === "lastClone")
์ด ์ฝ๋์ ์๋ฏธ๋, ์๊น ์์ html์์ querySelectorAll๋ก ๋ถ๋ฌ์จ ์ฌ๋ผ์ด๋ ๋
ธ๋๋ฆฌ์คํธ๋ค์ด
carouselContents๋ณ์ ์์ ํ๋์ฉ ๋ด๊ฒจ์๊ณ , ๊ทธ๊ฑธ index๋ก ์ ๊ทผํ ๊ฒ์ด๋ค.
๋ง์ฝ ์ฌ์ฉ์๊ฐ ๊ณ์ ์ด์ ๋ฒํผ์ ํด๋ฆญํ๋ค๊ฐ
counter์ด 0์ด ๋์ด์ ๋งจ ์์ ์ถ๊ฐํด๋ <div id="lastClone" class="slide_item">5</div>
์ ๋๋ฌํ๋ฉด,
carouselSlide.style.transition="none";
์ ์ค์ ํด์ ์์ง์ฌ๋ ์๋ฌด๋ฐ ์ ๋๋ฉ์ด์
ํจ๊ณผ๊ฐ ์๋๋ก ์ค์ ํ๊ณ
counter=carouselContents.length
- 2;๋ฅผ ์ ์ฉํ๊ณ
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
๋ฅผ ์คํ์์ผ์
์ด ์์น๋ก ์๋ฌด ์ ๋๋ฉ์ด์ ์์ด ์ด๋ํ๋๋ก ์ค์ ํ๋ค.
๋ฐ๋๋ก ๋น์ทํ ๋ก์ง์ผ๋ก ๋ค์๋ฒํผ์ ๊ณ์ ๋๋ฅด๋ค๊ฐ counter์ด ๋ง์ง๋ง slide์ ์ธ๋ฑ์ค์ ๊ฐ๊ฒ๋๋ฉด
counter = carouselContents.length - counter;
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
์ด๋ ๊ฒ ์์ฑํด์
์ฌ๊ธฐ๋ก ๋์์ค๊ฒ ํ๋ฉด ๋๋ค.
counter = carouselContents.length - counter;
์ด๊ฑฐ ๋ง๊ณ ๊ทธ๋ฅ counter=1; ์ด๋ผ๊ณ ์จ๋ ๋ฉ๋๋ค.
์ผ๋จ ์ด๋ ๊ฒ ์๋ํฉ๋๋ค. ์ด์ํ์์ overflow:hidden์ ์ฃผ๋ฉด
์๋ก์ฝ๋กฌ ์๋ํฉ๋๋ค!!!!
//Button Listeners
nextBtn.addEventListener("click", () => {
if (counter >= carouselContents.length - 1) return;
carouselSlide.style.transition = "transform 0.3s ease-in-out";
counter++;
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
});
prevBtn.addEventListener("click", () => {
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.3s ease-in-out";
counter--;
carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
});
console.log(carouselContents.length);
์ฌ๊ธฐ์ ๋ง์ฝ if ๋ถ๋ถ๋ค์ ์ฃผ์์ฒ๋ฆฌํ๊ณ ์คํํ ๋, transition์ด 0.3์ด๋ง์ ํ ์์ง์ด๋ ์๋๋ณด๋ค ์ฌ๋์ ํด๋ฆญ์๋๊ฐ ๋น ๋ฅด๋ฉด ์ผ์ชฝ,์ค๋ฅธ์ชฝ์ผ๋ก ๋ฌดํ์ด๋ํ๋ค..
์๋ก์ผ...
๊ทธ๋์ ๋ฒํผํด๋ฆญ ์ด๋ฒคํธ๋ก๋ counter์ด 0์ด๊ฑฐ๋ 0๋ณด๋ค ์์๋ ์๋ฌด๊ฒ๋ ํ์ง์๊ณ returnํ๋๋ก ์กฐ๊ฑด์ ๊ฑธ์ด์ค์ผํ๋ค.ใ ใ
๋ฐ๋์ ๊ฒฝ์ฐ๋ ๋๊ฐ์ ๋ก์ง์ผ๋ก if๋ฌธ์ ๊ฑธ์ด์ฃผ๋ฉด ๋๋ค...
์ฌ๋ผ์ด๋์ชฝ ๊ตฌํ์ ๋๋ด๊ณ ์๋์ ๋๋ณด๊ธฐ์ชฝ ๊ตฌํ์ ํ๋ ์ค,
์ ์ฌ์ง์ฒ๋ผ ๊ธ์จ๊ฐ ์ ํด์ง width ์ด์ ๋์ด๊ฐ๋ฉด ...์ผ๋ก ๋จ๊ธธ๋ ์ด๋ป๊ฒํ๋ ๊ตฌ๊ธ๋งํด๋ดค์ต๋๋ค
.target {
display: inline-block;
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
์๋ก์ฝ๋กฌ ํ๋ฉด ๋ฉ๋๋น..!
๋ญ๊ฐ ํ๋ณตํ๋ฐ...๋ชจ๋ฅด๊ฒ ๋ค..๋๊ฐ...๊ณผ๋ถํ์จ ๋๋์ด๋ค..
๊ทธ๋๋ ์ค๋ ํ๋ฃจ ๋ถํ์ด ๋ ์์ ์๊ฒ ์ง์ง์ง์ง๊นใ ๊น์ง์ง!!!ํ๊ณ ๋ฐ์ ๋ฐฑ๋ฒ ์ณ์ฃผ๊ณ ์ถ๋ค...ใ ใ
์ฐธ๊ณ : https://webdir.tistory.com/483 https://www.youtube.com/watch?v=KcdBOoK3Pfw