SMALL 프론트엔드 개발자/JS29 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(3) 클론코딩 연습하기 행복한 빙그레의 맛 커피 커피 커피 커피 커피 커피 커피 커피 커피 이전보기 다음보기 Carousel 기본형 문화포털 메인배너 이전보기 정지/재생 다음보기 오픈매장소개 LiveAll 메인배너 이전보기 다음보기 페이지네이션 애니메이션만들기 2023. 4. 13. 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!(2) /// swiper js - 자바스크립트를 기반으로 한 슬라이드 라이브러리 - 거의모든 웹사이트에서 사용하는 대표적인 Lib - 커스터마이징이 아주 자유로움(자바스크립트에 대한 지식을 요구) /// 스와이퍼 사용법 1. 공식사이트 (swiperjs)에서 스와이퍼.js 스와이퍼.css --> download, CDN 파일 연결 스와이퍼 인스톨 1) NPM ( Node pakage manager) 방식 - nodejs가 설치되어있어야함. ( CLI방식) 2) CDN ( Common Delivery Network ) 2. 스와이퍼 기본구조를 바탕으로 HTML마크업하기 기본구조1) div.swiper div.swiper-wrapper div.swiper-slide 기본구조2) div.swiper ul.swipe.. 2023. 4. 10. 자바스크립트 javascript 11. OOP 객체지향프로그래밍 /// 자바스크립트 변수 -> 데이터의 종류 숫자, 문자, 불린(참과 거짓),배열,함수, 객체(object) /// OOP 객체지향프로그래밍 -- 자바스크립트 객체는 데이터와 함수를 저장하는 자료구조 -- 객체는 속성(property)과 메소드(method)로 구성 -- 속성은 객체의 상태를 나타내는 변수 -- 메소드는 객체의 행동을 나타내는 변수 -- 자바스크립트 객체는 {}를 사용하여 생성 -- 속성과 메소드는 Key, Value로 구성 연습1 연습2 2023. 4. 10. 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!! slider lib, slider plugin 1) vanilla script base ex> 설명서,파일다운로드 구성파일 슬라이더.js --------> 슬라이더.css 페이지 슬라이더 적용 -> js작성 1) 슬라이더.css 링크 -> 다운로드, CDN링크 2) 슬라이더.js 링크 -> 다운로드, CDN링크 3) 슬라이더 동작.js => 사용자가 작성 2) jQeury base - 슬라이더.js - 슬라이더.css - 슬라이더동작.js -=> 사용자가 작성함 HTML문서 1. 슬라이더.css연결 2. jQeury.lib 연결 3. 슬라이더.js연결 4. 슬라이더동작.js -> 사용자가 직접 작성 ****** 중요 jQuery기반의 슬라이더는 jQuery버젼에따라 동작하거나 동작하지 않을수 있음. jQ.. 2023. 4. 7. 이전 1 2 3 4 5 6 ··· 8 다음 LIST
