📖 오늘 학습 뽀인트!

1. carousel
   1-1 CSS
   1-2 JavaScript
2. preventDefault

1. carousel

🕵️‍♀️carousel이란?
캐러셀은 컨베이어 벨트라는 뜻으로 컨텐츠를 슬라이드 형태로 구현하는 것이다.

1-1 CSS

.container{
    perspective: 1600px;
}
.item-wrap {
    transform-style: preserve-3d;
}

위치와 크기에 대한 스타일링은 제외하고 캐러셀에 대한 스타일만 작성했을 때 위와 같은 소스코드로 표현된다.
perspective : 원근감을 주는 역할
transform-style: preserve-3d : 입체적으로 보여주는 역할.

1-2 JavaScript

//정적
const center = document.querySelector(".item-wrap");
const items = document.querySelectorAll('li');
const radius = items[0].offsetWidth * items.length / 3.14 / 2; 
items.forEach((item, index)=>{
 item.style.transform= `rotateY(${360/items.length*index}deg) translateZ(${radius}px)`;   
})

먼저 정적인 부분인데, 정적인 부분은 페이지가 처음 열렸을 때 보여지는 부분이다. 이 정적인 부분을 CSS에서 작성하여도 문제는 없지만, 추후 아이템이 추가되거나 변경되면 전체적인 코드 수정이 번거롭기 때문에 확장성을 고려하여 JS로 구현하는 것이 좋다.
radius변수는 반지름을 구하는 공식을 저장하였다. 현재 이 캐러셀의 형태는 원형이다. 반지름 만큼 translateZ을 주면 모두 반지름 만큼 중심에서 멀어지는 효과를 볼 수 있다. items 배열에 담긴 각 요소들을 forEach 문을 통해 Y축으로 회전을 시킨다. 각 요소마다 회전 각도가 다르기 때문에 360/items.length*index로 구현한다.
0번 인덱스 아이템만 translateZ을 줄였을 때 위 사진과 같이 표현된다.

---

// 동적
const angle = 360/items.length;
let curr_angle = 0;
document.addEventListener("click", (event)=>{
    if(window.innerWidth/2 < event.clientX){
        curr_angle += angle;
    } else{
        curr_angle -= angle;
    }
    center.style.transform = `translate(-50%, -50%) rotateY(${curr_angle}deg)`;
})

이제 동적인 부분을 볼 차례이다. 브라우저 좌우를 클릭했을 때 나타나는 변화이다. angle 변수에는 360deg / 7(아이템 길이)을 저장했다. 브라우저 왼쪽을 클릭하면 curr_angle 감소되어 아이템을 감싸고 있는 wrap이 왼쪽으로 회전되고 우측을 클릭하면 curr_angle 증가되어 오른쪽으로 회전하는 원리이다.

2. preventDefault

🕵️‍♀️preventDefault란?
브라우저의 기본 이벤트 동작을 취소하는 메소드이다. 사용자 편의를 위해 등록된 기본 이벤트 동작이 불필요할 때 중지하는 역할을 한다.

const test = document.querySelector(".a");
      test.addEventListener("contextmenu", () => {
        event.preventDefault();
      });

a라는 class 우측 클릭시 발생하는 이벤트를 중지하는 소스코드이다.
submit 후 페이지가 새로고침되는 기본 이벤트도 중지할 수 있다.