신선우의 블로그 신선우의 블로그

[스와이퍼 복습하기]수업 코드펜 바로가기swiper-box는 스와이퍼 구조 형제로 타이틀이나 다른 상품구조가 들어올수도 있기 때문에 항상 만들어줘야 한다. -. 스와이퍼 스크롤 오류?ㄴ swiper라는 클래스에 고정 높이를 지정하지 않으면 스크롤이 무한으로 생기는 오류가 있다. * 해결방법swiper 클래스에 고정 px 높이를 지정한다그 외 상위 엘리먼트 한테는 고정 px높이를 지정하지 않아도 괜찮다. -. 개발자 모드에 상위엘리먼트ㄴ 상위선택자가 개발자모드에 선택되어있는 경우 상위선택자가 개발자모드에 선택 되어 있기 때문에 스와이퍼 공식 홈페이지에서 커스텀할 코드를 가져와서 적용해야 한다 슬라이드 펄뷰-프리뷰-컨트롤+U = 코드보기로 가져오기 slidesPerView - ㅇvertical - 세로로 정..

[스와이퍼 마켓컬리 상품리스트 구현]수업 코드펜 바로가기 ㅇㅇㅇ  [스와이퍼 데모버전 사용하는 방법]수업 코드펜 바로가기 스와이퍼 슬라이드가 한칸씩 유연하게 넘어가도록 구현하기 -. 넘어가는 것은 .swiper-slide 자체가 넘어가는 것이다-. slidesPerView: 3, -. spaceBetween: 30,  [스와이퍼 반응형]수업 코드펜 바로가기  breakpoints 을 검색하고 복사하여 사용가장 작은 화면에서 슬라이드가 한개로 나와야 할 때 slidesPerView을 1로 설정 spaceBetween을 10으로 설정해야 한다.스와이퍼 반응형은 ★★ 작은 화면 크기부터 작성 해야 한다.공식 홈페이지에서 breakpoints 코드를 가져왔을 때, 마지막에 작성 되어 있는 닫는 중괄호에 }, ★..

// 답변박스를 클릭했을 때 닫히는 현상 해결$(".a-box").click(function (){  return false;});  [스와이퍼] 수업 코드펜 바로가기[스와이퍼 홈페이지 바로가기]   -. CDN - 라이브러리를 연결하는 링크 -. 스와이퍼 html 구조(필수) -. 스와이퍼 css 구조 옮기기(필수구조아님) -. 스와이퍼 jsscript 옮기기(필수) -. 스와이퍼 전체 구조 이해하기[ 스와이퍼 라이브러리 시작시 주의사항]모든 라이브러리는 시작하기 전에 모든 html, css를 파악하고 시작한다. 파악하는 방법은 개발자 모드에 있는 숨겨진 코드를 전부 꺼내놓는 방법이 있다스와이퍼 html에서 필요하지 않은 구조를 지웠다면 자바스크립트에서도 지워줘야 정상 작동한다  -. 자바스크립트 AP..

[아코디언]수업 내용 코드펜 바로가기둥글리기-2배수 단위로 쓰면 좋다 this의 .siblings(형제들)을 removeClass를 active한다   [find 이벤트]-. 제이쿼리 애니메이션 이벤트는 한쪽만 사용하면 안된다. 예를들어 slideUp을 사용했으면 반드시 slideDown도 있어야 한다-. ★ ★ ★ ★ ★ ★ 제이쿼리 애니메이션 이벤트는 html 구조가 나오거나 삭제되기 전에 애니메이션을 먼저 적용해야 한다

[팝업 복습]팝업 복습 코드펜 바로가기 [아코디언 초급-this]수업 코드펜 바로가기  박스들(.box-list)

수업페이지 바로가기ㄴ 드라이브에서 자료 다운로드 후 시작 [배경 눌렀을 때 팝업 닫기]조건 : 오퍼시티 된 검정 창을 눌렀을 때 팝업 닫기popup-section을 선택해준다 [클릭 막기- return false; ]위 예제 코드펜 바로가기 return false; - ~까지 막아준다는 뜻으로, 위 예제에서는 article까지 클릭되게 해준다는 뜻이다e.stopPropagation(); - return false랑 같은 의미를 가지는 코드  * 부모자식 관계를 굳이 만들지 않고 박스 위에 다른 박스를 씌워 만든다* 구분해야할 일이 생길 수 있어서이다* return false;가 걸려있는 선택자는 클릭되고 상위엘리먼트부터 클릭되지 않는다.* return false;를 사용 하지 않도록 html, css 구..

[제이쿼리 복습]복습 수업 코드펜 바로가기  링크 가져오기 1번째 방법 ㄴ setting - JS - 검색 2 번째 방법setting 에서 가져온 주소를 스크립트 안에 넣는다 [클릭]수업 코드펜 바로가기 tip: 조건을 먼저 css에 걸어두고 시작하는 것이 좋음목적도 함께 설정하자 버튼이 두개일 경우 버튼에 클래스를 달아 구분해주기 [else]수업 코드펜 바로가기 \ㅇㅇㅇㅇ [나머지 연산자를 활용한 토글형태 구현]형태 구현 연습 코드펜 바로가기 [팝업 띄우기]팝업 띄우기 vscode 옮긴 코드펜 바로가기

* 사이트 구경하며 모작하기** 이전 웹2 복습하기 [Java Script]-. 1일차 복습 하기1일차 복습 코드펜 바로가기 console.clear(); - 가장 상단에 작성해서 깨끗한 콘솔 창을 만들어준다console.log(); - * 집에서는 F12을 눌러 개발자 모드로 확인해서 연습해보기 숫자랑 문자가 만나면 문자화 된다.  -. 2일차 : 변수2일차 수업 코드펜 바로가기 지역변수 var -위험 부담 있음전역번수 let -체계적인 코드 짜기 가능변수명으로 사용할 수 없는 단어 모음zip   -. 연산자와 피연산차선생님이 정리해주신 코드펜 바로가기 -. if수업 코드펜 바로가기 -. 함수수업 코드펜 바로가기  -. 제이쿼리제이커리 수업 코드펜 바로가기세팅->검색창에 JQ검색 후 클릭