LearnFit

 YouTube, 딱 자바스크립트 3줄로 만드는 DIY 이미지 슬라이더 (Carousel)

서원석님의 학습노트

바닐라 자바스크립트 3줄로 만드는 Carousel(슬라이더)

#전체

#개발자

#프론트엔드

#자바스크립트

#javascript

#jquery

#이미지슬라이드

#flick

#slick

#bxslider

#슬라이드 만들기

#자바스크립트 슬라이더

#javascript 슬라이더

#js

#라이브러리

#플러그인

00:00영상 내용과는 무관한 노트 해당 영상 내용을 React로 구현한 코드는 여기서 참고해주세요 링크: https://github.com/westone034626/ReactPractice/tree/main/src/Carousel

00:03슬라이더란?(Carousel) *Carousel(캐러셀)을 구글에 검색하니까 이미지란에 회전목마가 나오네요?

00:15(~00:38)해당 영상 어필 타임(건너뛰어도 무방)

00:39HTML 코드 작성

01:46그림을 통한 설명(어떻게 구현할지)

02:32CSS 코드 작성

03:59overflow: hidden 설명: 창문이 있는 방을 상상해보세요. 그리고 창문으로 흘러가는 구름을 지켜본다고 상상해보세요. 구름이 너무너무너무 커서 우리가 창문으로 볼 수 있는 구름의 크기는 일부분이라고 생각해볼게요. 여기서 창문은 overflow: hidden이 적용된 div라고 생각하면 되고 구름은 container div라고 생각하시면 됩니다. 실제 구름의 크기와는 상관없이 우리가 볼 수 있는 영역은 창문의 크기로 제한됩니다.

04:10버튼 만들기

05:22container div에 transform 적용함으로써 내부 보여지는 이미지 변경

05:39margin 대신에 transform으로 container를 조작하는 이유

06:17script(javascript) 코드 작성 *button 눌렀을 때 container div에 transform 적용되도록

08:31transform에 animation 넣기(transition)

09:27버튼 3의 기능에 대한 코드 작성

10:06영상 끝 and 과제

✔ 학습 완료

취소

작성하기

이런 러닝패스는 어때요?

무료

박어진

의 러닝패스

Adaptive Learning이란 무엇이고 어떤 서비스들이 있나?

서원석님의 다른 노트는 어때요?

서원석

의 학습노트

리액트로 이미지 미리보기 구현(feat. useState, useEffect, useRef, FileReader)

Video

⏱ 핵심 스탬프

25개

00:01

이 학습노트에서 구현하는 결과물 입니다.(파일 선택기에서 이미지 파일을 고르면 이미지 미리보기)

00:25

코드 살펴보기 시작

👍

서원석

의 학습노트

리액트 라우터 버전 6의 리다이렉트는 Navigate로 구현

Video

⏱ 핵심 스탬프

8개

00:00

해당 학습노트에서는 react router 버전6에서 redirect를 어떻게 구현하는지 소개합니다. 공식 문서: https://reactrouter.com/

00:50

react router 버전5에서 redirect를 구현하는 방법입니다. *예상 시나리오: pathname이 '/redirect'인 page 접근 시 pathname '/about'인 page로 전환됨 *특정 pathname에 redirect 로직을 등록하는 이유는 가지각색이겠지만 그 중 대표적인 용도는 로그인 여부 검사입니다. 서비스를 이용하는 유저가 로그인을 했을 경우 특정 pathname에 접근하지 못하도록 사용하는 것이죠.

👍

다시 보지않기