kimyws

■ 화면에 따른 Html 열기○ JS로 만들어서 Index(모바일, PC)에 링크function winSizeHtml(){ let winw = $(window).width(); if(winw  ■ 기존 요소에서 요소 내부 요소 변경○  기존 콘텐츠에 덮어 쓰기$('#contentBox').load('content2.html'); ○  뒤에 추가 하기$('#changeContentBtn').click(function() { $('#contentBox').append('이것은 새로 추가된 콘텐츠입니다!');}); ○  앞에 추가하기$('#changeContentBtn').click(function() { $('#contentBox').prepend('이것은 기존 콘텐츠 앞에 추가된 콘텐..

■ JQuery 적용○ JQuery란?자바 스크립트 라이브러리로 크로스 브라우징 기능을 가지고 있음크로스 브라우징은 다양한 브라우저에서 같은 코드로 동일한 동작을 할 수 있게 해줌.자바 스크립트는 코드가 너무 길어지고 복잡해지는 단점이 있지만JQuery를 사용하면 같은 기능도 간략하고 단순한 코드로 구현가능 ○ JQuery 적용- JQuery 사이트에서 주소를 복사해서 가져와서 사용 - JS파일 만들어서 JQuery 적용 해도 됨내용 전체 복사 - JQuery 사용body에서 아래쪽에 사용 클래스 및 아이디로 된 태그들이 생성전에 실행됨.body밖에 사용해도 문제는 없음(아래쪽이면)      ■ JQuery 사용○ 기본 불러오기- document(문서가) ready(준비된후) / 간략..

■ 아래 컨텐츠가 밀어 올리면서 화면전환 Section 1 Section 2 Section 3 Section 4   ■ 패럴렉스 옆으로 이동 이후 콘텐츠 올라오기 Section 1 Section 2 Section 3 Section 4 콘텐츠2

■ Snap Scrolling Section 1 Section 2 Section 3 Section 4  ○ Scroll-snap▷ scroll-snap-type: 축 스냅 종류;- 축 :  x  y  both 로 적용- 종류mandatory : 스크롤 완료시 스냅 포인트에 반드시 스냅proximity : 스크롤이 스냅 포인트에 가까운 경우에만 스냅 되도록 ▷ scroll-snap-align: 스냅포인트를 자식요소에 지정start : 시작부분을 포인트로 설정center : 중앙부분을 설정end : 끝 부분을 설절none : 설정하지 않음

■  버튼 클릭시 스크롤 이동 Section 1 Section 2 Section 3 Section 4 1 2 3 4   ■  스크롤 확인 후 클래스 추가 버튼 1 2

■  이미지 슬라이드 자동 효과 let i = 0;$(".imgbox").append($(".img").first().clone(true));setInterval( function(){ i++; $(".imgbox").animate({marginLeft:-$(".img").width()*i},600); if(i===$(".img").length-1){ setTimeout( ..

■ 이미지 페이드 인아웃 효과