Web Programming/Step3. HTML&CSS&JS 심화 (16) 썸네일형 리스트형 제이쿼리 플러그인 활용 목차 1. 스와이퍼 2. 게시물 슬라이더 3. GSAP 4. 천천히 나타나는 상품리스트 1. 스와이퍼 스와이퍼 사용법 공식 사이트 : https://swiperjs.com/ 라이브러리 : https://swiperjs.com/get-started 데모 : https://swiperjs.com/demos - 해당 코드들 복붙하면 기초적인 사용법 터득이 가능(라이브러리 코드) 이미지 슬라이더 만들기 실습 나중에 포스팅 2. 게시물 슬라이더 실습 나중에 포스팅 3. GSAP GSAP 기초 애니메이션 라이브러리 jQuery & GSAP 라이브러리 가져오는 링크 : https://cdnjs.com/ 예시 var tl = gsap.timeline({ repeat:-1, repeatDelay:1 }); tl.from.. #. jQuery 기초와 활용 목차 1. 제이쿼리 기초 2. 제이쿼리 이벤트 3. 이미지 갤러리 사이트, 사이드 바 - 제이쿼리 적용 4. 회색 사이트, 메뉴바 구현, 드롭다운 - 제이쿼리 적용 1. 제이쿼리 기초 팝업창 만들기 JS console.clear(); for ( let no = 1; no 실습. 팝업창 만들기 & 제이쿼리 적용 목차 팝업창 만들기 이미지 갤러리 사이트, 사이드 바 - 제이쿼리 적용 회색 사이트, 메뉴바 구현, 드롭다운 - 제이쿼리 적용 팝업창 만들기 HTML 버튼 1 버튼 2 버튼 3 닫기 내용 1 닫기 내용 2 닫기 내용 3 CSS .popup { position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,.3); display:none; align-items:center; justify-content:center; } .popup.active { display:flex; } .popup > section { width:100%; max-width:800px; border:10px solid black; padding:.. #. JavaScript 기초와 활용 목차 1. 변수, 출력, 조건문 2. 함수, 매개변수, 리턴 3. 객체 1. 출력, 변수, 조건문 출력하기 console.clear(); console.log(); 텍스트와 숫자 더하기 console.clear(); console.log(10 + 10); // 20 console.log("점수 : " + "10"); // "점수 : 10" console.log("점수 : " + 10); // "점수 : 10" console.log("점수 : " + 10 + 20); "점수 : 1020" console.log("점수 : " + 10 * 20); "점수 : 200" console.log("점수 : " + (10 + 20)); "점수 : 30" 변수 console.clear(); let x; // 변수 x 생.. #. POSITION 속성(2) 목차 4. fixed와 before/after 그리고 트랜지션 심화 5. 이미지 갤러리 사이트, 사이드바 만들기 4. fixed와 before/after 그리고 트랜지션 심화 fixed postion : absolute와 동일하나, 스크롤바를 따라다닌다. div { position:fixed; top:0; left:0; width:300px; height:100%; background-color:red; } before/after 기본적으로 inline-block이다. /* ::after => 새로운 막내자식을 추가한다. */ ul > li::after { content:"님"; } /* ::after => 새로운 막내자식을 추가한다. */ ul > li::before { content:"위대하신 "; .. 실습. 사이드바 만들기 목차 1. 사이드바 만들기 2. 이미지 갤러리 사이트 만들기 1. 사이드바 만들기 HTML ▶ ▼ 1차 메뉴 아이템 1 1차 메뉴 아이템 2 2차 메뉴 아이템 1 2차 메뉴 아이템 2 2차 메뉴 아이템 3 2차 메뉴 아이템 4 3차 메뉴 아이템 1 3차 메뉴 아이템 2 3차 메뉴 아이템 3 3차 메뉴 아이템 4 3차 메뉴 아이템 5 2차 메뉴 아이템 5 3차 메뉴 아이템 1 3차 메뉴 아이템 2 3차 메뉴 아이템 3 3차 메뉴 아이템 4 3차 메뉴 아이템 5 1차 메뉴 아이템 3 2차 메뉴 아이템 1 3차 메뉴 아이템 1 3차 메뉴 아이템 2 3차 메뉴 아이템 3 3차 메뉴 아이템 4 3차 메뉴 아이템 5 2차 메뉴 아이템 2 3차 메뉴 아이템 1 3차 메뉴 아이템 2 3차 메뉴 아이템 3 3차 메뉴 아.. #. POSITION 속성(1) 목차 1. POSITION 속성 2. Top, LEFT, RIGHT, BOTTOM과 RELATIVE 3. 회색 사이트, 메뉴바 구현, 드롭다운 1. POSITION 속성 Position absolute section > div { width:50%; height:25%; background-color:blue; position:absolute; } section > div:nth-child(1) { top:0; left:0; } section > div:nth-child(2) { background-color:gold; top:10%; left:10%; } position을 설정하면 부모 element에 관계 없이 해당 영역을 벗어난 위치 지정이 가능하다. z-index section > div:nth-.. 실습. 2차, 3차 드롭 다운 메뉴 만들기 목차 2차 드롭 다운 메뉴 만들기 3차 드롭 다운 메뉴 만들기 2차 드롭 다운 메뉴 만들기 기본 레이아웃 HTML Home Articles Notice Free Development Member Join Sign In Find Account Faq CSS /* 폰트 시작 */ @font-face { font-family: 'LotteMartDream'; font-style: normal; font-weight: 400; src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/lottemart/LotteMartDream/LotteMartDreamMedium.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfon.. 이전 1 2 다음