SMALL 여행133 자바스크립트 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. 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. 이전 1 2 3 4 5 6 7 ··· 34 다음 LIST
