웹3 - 8강 (6.3)

[지난시간 복습]

- if else 복습
- 애니메이션 복습
- 형제 복습
- this는 내가 선택한 것이 동작하도록 만들어줌
- hasClass
if ($(this).hasClass("active"))
- 내가 선택한 this가 active를 가지고 있다면 if 실행, 가지고 있지 않다면 else 실행
$(this).find(".a-box").slideUp(300);
- if가 선택되면 a박스를 찾아서 애니메이션(속도)를 실행한다

---

스와이퍼

 

[chat GPT 활용하기]

(1)스크롤 내리면 엘리먼트 배경색 초록색으로 다시 올리면 흰색으로 변하는 제이쿼리 코드 알려줘

 

(2)$(window) 이거는 뭐하는 코드야?

 

(3)윈도우의 크기를 조정했을때 body배경색이 그레이색으로 바뀌는 코드 알려줘

 

(4)$(window).resize를 활용한 예제 몇개만 알려줘

 

[라이브러리 시작시 주의사항]

(1)모든 라이브러리는 시작 하기전에 모든html,css를 파악하고 시작한다.

파악하는 방법은 개발자 모드에 있는 숨겨진 코드를 전부 꺼내놓는 방법이 있다.

 

(2)라이브러리를 사용할때 개발자모드에 있는 css가 css파일에 있는 css보다 힘이 강하다라는 사실을 알고 선택자를 활용해서 css코드를 커스텀 해야한다.

[예시]

(틀린 형태).swiper{margin: 0;}

(맞는 형태1)선택자 > .swiper{margin: 0;}

(맞는 형태2)선택자 .swiper{margin: 0;} 등등..

[스와이퍼]

[스와이퍼 라이브러리 연결하는 링크] → 필수구조

 

[스와이퍼 html구조] → 필수구조

 

[스와이퍼 css구조] → 필수구조는 아님

 

[스와이퍼 JS구조] → 필수구조

 

[스와이퍼 API 활용하기] →

클릭

 

[스와이퍼 가져오기 링크]

https://swiperjs.com/get-started

Swiper - The Most Modern Mobile Touch Slider

1. CDN - 스와이퍼 라이브러리 연결하는 링크 - html에 연결
2. html 구조 가져오기
3. css구조 가져오기 - 필수 구조는 아님
4. js 가져오기

 

 

[스와이퍼 라이브러리 시작 시 주의사항]

1. 모든 라이브러리는 시작하기 전에 모든 html, css를 파악하고 시작한다. 파악 방법은 개발자 모드에 숨겨져있는
    코드를 전부 꺼내놓는 방법이 있다.
2. 개발자 모드에서 구조 파악 무조건 해야한다
3. 라이브러리를 사용할 때 개발자 모드에 있는 css가 css파일에 있는 css보다 힘이 강하다는 사실을 알고
    선택자를 활용해서 css 코드를 커스텀 해야한다.
     [예시]
    (틀린형태) .swiper{margin: 0;}
    (맞는형태1) 선택자 > .swiper{margin: 0;}
    (맞는형태2) 선택자 .swiper{margin: 0;} 등등

 

 

[스와이퍼 시작하기]

https://codepen.io/kkkge/pen/NWVjPLB?editors=1010

스와이퍼 시작하기

 

 

[스와이퍼 구조 활용하기]

https://codepen.io/kkkge/pen/pomPJGy?editors=1100

스와이퍼 구조 활용하기