웹3 7일차

// 답변박스를 클릭했을 때 닫히는 현상 해결

$(".a-box").click(function (){

  return false;

});

 

 

[스와이퍼]

 

수업 코드펜 바로가기

[스와이퍼 홈페이지 바로가기]

 

 

-. CDN - 라이브러리를 연결하는 링크

 

-. 스와이퍼 html 구조(필수)

 

-. 스와이퍼 css 구조 옮기기(필수구조아님)

 

-. 스와이퍼 jsscript 옮기기(필수)

 

-. 스와이퍼 전체 구조 이해하기

html

css

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

모든 라이브러리는 시작하기 전에 모든 html, css를 파악하고 시작한다.
 파악하는 방법은 개발자 모드에 있는 숨겨진 코드를 전부 꺼내놓는 방법이 있다

스와이퍼 html에서 필요하지 않은 구조를 지웠다면 자바스크립트에서도 지워줘야 정상 작동한다

 

 

-. 자바스크립트 API 활용하기

 

 

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

수업 내용 코드펜 바로가기

[스와이퍼 활용 시 주의점]

1. 새롭게 추가한 스와이퍼 (.swiper-box)에 고정크기를 적용해도 스크롤은 해결할 수 없다.
2. 새롭게 추가한 스와이퍼 박스(.swiper-box)는 고정크기를 지워도 스크롤 문제가 생기지 않는다.(조건:스와이퍼(.swiper)에 고정높이가 적용되어 있어야 함)
3. 스와이퍼 구조를 활용할 때 스와이퍼(.swiper)에 고정 높이를 적용하고 .container에 있는 고정높이를 제거하여 auto값을 사용하면 조금 더 완벽하게 구현할 수 있다.

★★★ 결론:스와이퍼(.swiper)에 고정높이가 없으면 스크롤이 이상하게 나오는 오류가 있고 스와이퍼(.swiper) 상위 엘리먼트들은 아무렇게나 구현해도 스크롤 오류가 생기지 않는다.