📌 캐러셀(carousel 디자인)(이미지 슬라이드)
핵심은 태그를가져와서 스타일을 바꿔준다
태그객체.style.css속성 = 'css값';
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>캐러셀</title>
<style>
.carousel-frame{
width: 1000px;
/* border: 5px solid black; */
margin: 0 auto;
/* ??? */
overflow: hidden;
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;
}
.carousel-contents{
/* border: 5px solid red; */
display: flex;
transition: 0.2s;
}
.carousel-item{
width: 1000px;
height: 200px;
flex-shrink: 0;
}
.line{
width: 1000px;
background-color: silver;
/* border: 3px solid silver; */
margin: 20px auto;
box-sizing: border-box;
}
.target{
width: 200px;
border: 3px solid red;
transition: 0.3s;
/* transform: translateX(800px); */
}
</style>
</head>
<body>
<h1>요소 한 개짜리 캐러셀</h1>
<div class="carousel-frame">
<div class="carousel-contents">
<div style="background-color: aqua;" class="carousel-item">1</div>
<div style="background-color: beige;" class="carousel-item">2</div>
<div style="background-color: aquamarine;" class="carousel-item">3</div>
<div style="background-color: goldenrod;" class="carousel-item">4</div>
<div style="background-color: violet;" class="carousel-item">5</div>
<div style="background-color: aqua;" class="carousel-item">1</div>
<div style="background-color: beige;" class="carousel-item">2</div>
<div style="background-color: aquamarine;" class="carousel-item">3</div>
<div style="background-color: goldenrod;" class="carousel-item">4</div>
<div style="background-color: violet;" 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>
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 cnt = 0;
const leftHandler = ()=>{
// 지금 내가보고 있는 그림이 몇번째인지,
const line = document.querySelector('.line');
const frame = document.querySelector('.carousel-frame');
const items = document.querySelectorAll('.carousel-item');
if(cnt <= 0){
cnt = items.length;
}
cnt = cnt - 1;
const carContents = document.querySelector('.carousel-contents');
carContents.style.transform = `translateX(-${cnt*frame.offsetWidth}px)`;
const target = document.querySelector('.target');
target.style.transform = `translateX(${cnt*(line.offsetWidth/items.length)}px)`;
}
const rightHandler = ()=>{
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(cnt >= items.length-1){
cnt = -1;
}
cnt = cnt + 1;
const carContents = document.querySelector('.carousel-contents');
carContents.style.transform = `translateX(-${cnt*frame.offsetWidth}px)`;
const target = document.querySelector('.target');
target.style.transform = `translateX(${cnt* (line.offsetWidth/items.length)}px)`;
// target.style.width = `${(cnt + 1)*200}px`;
}
</script>
</body>
</html>📌 onload (자바스크립트 코드는 html이 다 로딩이 되고 실행 해라)
script가 아래쪽에 있으면 html이 만들어지고 , javascript 가 실행되기 때문에 웬만하면 오류가 나지 않지만,
간혹 자바스크립트 속도가 더 빨라서 html이 만들어지기 전에 실행되는 경우가 있다.
그려면querySelector()를 통해서 태그 객체를 받아와도html요소가 없으니null이 결과로 나오는 경우가 있다
이를 방지하기 위해 javascript 코드 안쪽에서 바로
html을 받아오는 경우에는window.onload = ()=>{ 로딩이 다 되면 실행될 코드; 로딩이 다 되면 실행될 코드; 로딩이 다 되면 실행될 코드; 로딩이 다 되면 실행될 코드; 로딩이 다 되면 실행될 코드; }
📌 칸반
칸반보드(디자인은 css역량)
드래그 앤드 드랍했을 때 정렬되는 방식
html 속성 draggable
(기본으로 draggable인 요소)
텍스트, img<div draggable></div>
해당 요소가 드래그가 가능하다
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>draggable</title>
<style>
div{
width: 100px;
height: 100px;
border: 3px solid black;
}
</style>
</head>
<body>
<div draggable="true">1</div>
<div>2</div>
</body>
</html>❗️이벤트
✏️ dragstart
드래그가 시작되면발생하는 이벤트
✏️ drag
드래그되고 있다면발생하는 이벤트
✏️ dragenter
드래그 되는 요소가특정 요소 안으로 들어갔을때 발생하는 이벤트
✏️ drop
드래그 요소에손을 떼었을 때특정 영역 안에있다면발생하는 이벤트<div draggable="true" ondragstart="f()" ondrag="f2()">
나를위한 노트필기 📒🔎📝