프론트엔드 공부/라이브러리&프레임워크 (8) 썸네일형 리스트형 swiper 이전 다음 버튼 비활성화 loop = {false}, autoplay 기능을 꺼주면 비활성화기능이 적용된다 console.log(swiper)} > bootstrap 활용 기존 cdn을 사용하거나 npm install 하는 방법 두가지가 있는데 커스터마이징하기에는 npm 방식이 좋기때문에 이를 사용하는 순서를 나열해보겠다. 우선 bootstrap을 사용할 폴더에 1.index.html파일을 만든후 bootstrap 에서 사용할 예시를 html에 붙여넣고 연동할 js파일이 있다면 연동하기 2.터미널을 열어 package.json 설치 (npm init -y) 3.parcel-bundler 설치 (npm i -D parcel-bundler) 4.package.json에 설치 목록확인후 scripts에 "dev":"parcel index.html", "build":"parcel build index.html" 추가 후 터미널에서 npm run dev로 local 호스트 확인 5.. 제이쿼리 backtotop 버튼 만들기 클릭시 위로 이동하는 제이쿼리 구문입니다 ! 제이쿼리 animate 메서드 사용하여 간단하게 구현할수 있습니다. $('span').click(function(){ $('html,body').stop().animate({scrollTop:0},500); }) codepen.io/fangmin/pen/qBrdRJL jquery 부모자식형제요소 선택자 정리 find()는 선택한 하위요소 1 모두 선택가능 (**모든 하위선택도가능, ex. find('a'): a링크 가진 모든 하위요소) closet()은 선택한 상위요소 1 모두 선택가능 children()은 첫번째 하위요소만 선택가능 parent()는 첫번째 상위 요소만 선택가능 parents() 는 상위 모든 부모요소 반환 siblings() 는 같은 선상의 형제요소 모두 반환 prev() 이전요소 선택 next() 다음요소 선택 jquery 상단 네비 축소하기 ** 제이쿼리 css속성 적용 여러가지 속성적용시 대괄호로 묶어주고 쉼표대신 세미콜론 사용 ! AAA.css('속성',값); BBB.css({'속성:값','속성:값'}) $(function(){ //window scroll시 네비 축소 $(window).scroll(function(){ let mainHeader = $('#header'), //#header 높이변경 defaultLogo = $('.header .first > h1'), //글자 사이즈변경 navLetter = $('.header .topnav > a') //글자 line-height 변경 wScroll = $(this).scrollTop(); if(wScroll>100){ if(!mainHeader.hasClass('shrink')){.. jquery 스크롤시 네비바 변형 codepen.io/fangmin/pen/bGqGrpM jquery $(document).ready(); jquery 이벤트 메서드 중 하나로 문서가 준비되면 매개변수로 넣은 콜백함수를 실행하라 는 의미 하단과 같이 줄여 사용할수도 있고, 문서 시작 전에 주로 작성 skrolljs로 가로스크롤 만들기 codepen.io/fangmin/pen/mdWdbYb 20210505 skrolljs로 가로스크롤 ... codepen.io 이전 1 다음
