SMALL 프론트엔드 개발자80 자바스크립트 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. flex-item 속성 flex-grow, flex-shrink , flex-basis 사용하기 대표사진 삭제 사진 설명을 입력하세요. flex-item에 설정하는 속성(아이템 크기에 영향을 줌) // flex-grow : 성장 : 아이템전체크기보다 컨테이너가 클때 : 아이템의크기를 부모컨테이너의 크기에 맞춤 flex-grow:1 --> 아이템의 개수가 N개일때 1/n, 1/n, 1/n, 1/n // flex-shrink : 수축 : 컨테이너가 아이템의 전체크기보다 작을때 : 아이템의크기를 강제로 수축시킴(컨테이너에 맞게) // flex-basis : 크기 (flex-direciton의 영향을 받음) auto: 컨텐츠의 크기만큼만 적용 : flex 아이템에만 사용하는 크기값 display:flex설정시 flex-grow:0 flex-shrink:1 flex-basis:auto flex:none : .. 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 7 ··· 20 다음 LIST
