출처 https://www.myrealtrip.com/
캐러셀(carousel 디자인)
(이미지 슬라이드)
핵심은 태그를가져와서 스타일을 바꿔준다!!
태그객체.style.css속성 = 'css값';
01_carousel.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>캐러셀</title>
<style>
/* 검정색 div */
.carousel-frame{
width: 1000px;
/* border: 5px solid black; */
/* 가운데로 나오게 하기(정가운데 말고) */
margin:0 auto;
overflow: hidden;
/* abosolute가 기준이 되어서 움직이게끔 */
position: relative;
}
.left{
position: absolute;
top: 50%;
left: 20px;
opacity: 0;
transition: 0.5s;
}
.right{
position: absolute;
top: 50%;
right: 20px;
opacity: 0;
transition: 0.5s;
}
.carousel-frame:hover > button{
opacity: 1;
}
/* 빨간색 div */
.carousel-contents{
/* border: 5px solid red; */
/* div 가로 정렬 */
display: flex;
/* 처음엔 어짜피 1번 div가 보일꺼니까 없애도 된다 */
/* transform: translateX(-1000px); */
/* 부드럽게 바뀌게 하려면 transition사용 */
transition: 0.2s;
}
.carousel-item{
width: 1000px;
/* flex했다고 줄어들지마라 */
flex-shrink: 0;
height: 200px;
}
.line{
width: 1000px;
background-color: silver;
/* border: 3px solid silver; */
margin: 20px auto;
/* 딱 div 길이만큼 선을 만들려면 */
box-sizing: border-box;
}
.target{
/* width: 200px; */
border: 3px solid navy;
transition: 0.3s
/* transform: translateX(200px); */
}
</style>
</head>
<body>
<h1>요소 한 개짜리 캐러셀</h1>
<div class="carousel-frame">
<div class="carousel-contents">
<div style="background-color: paleturquoise" class="carousel-item">1</div>
<div style="background-color: beige" class="carousel-item">2</div>
<div style="background-color: pink" class="carousel-item">3</div>
<div style="background-color: palegreen" class="carousel-item">4</div>
<div style="background-color: palevioletred" class="carousel-item">5</div>
</div>
<button onclick="leftHandler()" class="left"><</button>
<button onclick="rightHandler()" class="right">></button>
</div>
<div class="line">
<div class="target"></div>
</div>
<script>
// JS code 해석이 더 빨라도 가장 나중에 실행되게끔 맨 마지막에 써준다.
// 그걸 확실히 방지하고 싶으면 onload() 라는 함수를 쓴다
window.onload = ()=>{
const line = document.querySelector('.line');
const items = document.querySelectorAll('.carousel-item');
const target = document.querySelector('.target');
target.style.width = `${line.offsetWidth / items.length}px`;
}
let count = 0; // 처음에 초기값을 0으로 잡아준다. 꼭 함수 밖에다 선언!!
const leftHandler = ()=>{
// 지금 내가보고 있는 그림이 몇번째인지,
// count
// 1번 0 0
// 2번 -1000 1
// 3번 -2000 2
// 4번 -3000 3
// 5번 -4000 4
const line = document.querySelector('.line');
const frame = document.querySelector('.carousel-frame');
const items = document.querySelectorAll('.carousel-item');
if(count <= 0) {
count = items.length;
}
count = count - 1;
const carContents = document.querySelector('.carousel-contents');
carContents.style.transform = `translateX(-${count*frame.offsetWidth}px)`;
carContents.style.transform = `translateX(-${count*frame.offsetWidth}px)`;
const target = document.querySelector('.target');
target.style.transform = `translateX(${count*(line.offsetWidth/items.length)}px)`;
}
const rightHandler = ()=>{
// 전체길이 / div갯수 = 하면 컴퓨터가 알아서 계산 해줄텐데...
// 코드를 그때 그때 잘 적용시키기 위해서 요소로 적어둔다
const line = document.querySelector('.line');
const frame = document.querySelector('.carousel-frame');
// console.log(line);
// 회색 선 전체의 길이: line.offsetWidth
// 한칸의 길이 : 회색선전체길이 / 갯수
const items = document.querySelectorAll('.carousel-item');
// items에는 무엇이 들어있다? :배열
// 배열의 요소의 갯수는? length 키값에 들어있다
if(count >= items.length-1){
count = -1;
// return; 함수 종료 시키려면
}
count = count + 1; // 여기가 어려움(누를때마다 숫자가 올라가야하니까)
const carContents = document.querySelector('.carousel-contents');
carContents.style.transform = `translateX(-${count*frame.offsetWidth}px)`;
const target = document.querySelector('.target');
// 막대기 이동시키기
// 원리: css를 어떻게 바꿔줄 것이냐
target.style.transform = `translateX(${count*(line.offsetWidth/items.length)}px)`;
// target.style.width = `(${(count+1)*200}px)`; 막대기 늘리기
}
</script>
</body>
</html>onload (자바스크립트 코드는 html이 다 로딩이 되고 실행 해라)
script가 아래쪽에 있으면 html이 만들어지고, javascript가 실행되기 때문에 웬만하면 오류가 나지 않지만
간혹 자바스크립트 속도가 더 빨라서 html이 만들어지기 전에 실행되는 경우가 있다.
그러면 querySelector()를 통해서 태그 객체를 받아와도 html요소가 없으니 null이 결과로 나오는 경우가 있다.
이를 방지하기 위헤 javascript 코드 안쪽에서 바로 html을 받아오는 경우에는
onload = ()=>{
로딩이 다 되면 실행될 코드;
로딩이 다 되면 실행될 코드;
로딩이 다 되면 실행될 코드;
로딩이 다 되면 실행될 코드;
로딩이 다 되면 실행될 코드;
}칸반
칸반차트(일본 기업인이 고안한 게시판)
디자인은 css 역량
Drag & drop 했을 때 정렬되는 방식
html 속성 draggable(드래그가 되는 요소니?)사용
(기본으로 draggable인 요소)
텍스트, img<div draggable></div>해당 요소가 드래그가 가능하다
이런걸로 '옷 입히기' 같은 게임도 만들 수 있다ㅎㅎ
이벤트
dragstart
드래그가 시작되면 발생하는 이벤트
drag
드래그되고 있다면 발생하는 이벤트
dragenter
드래그되는 요소가 특정 요소 안으로 들어갔을때 발생하는 이벤트
drop
드래그 요소에 손을 떼었을 때 특정 영역 안에있다면 발생하는 이벤트
<div draggable="true" ondragstart="f()" ondrag="f2()"><오늘의 과제>
Apple Store 온라인 사이트의 캐러셀
수요일 Figma 개인프로젝트에 추가 예정.
사용 해보기! (다음주 수요일까지)
브랜치 구분해서 회원가입과 로그인부분까지는 gitHub 확인(본인 코드와 비교)
Slowly but surely
좋은 글이네요. 공유해주셔서 감사합니다.