이번에 신규 페이지를 제작하며 갤러리를 만들어야 했는데, 다양한 라이브러리를 찾아보다가 기존에 자주 사용하던 swiper를 이용하여 갤러리를 구성할 수 있다는 걸 깨달았다. 먼저 예시를 보자면 다음과 같다. ( 예제 화면이 작게 보인다면 아래쪽 0.5x 클릭하여 확인하기 ) See the Pen swiper 3개 연동하기, thumbnail swiper and layer popup by Gia (@gia-world) on CodePen. 구성은 3개의 슬라이더로 되어있다. 메인 사진 슬라이더, 썸네일 슬라이더, 레이어 팝업 슬라이더. 메인 슬라이더를 넘기면 썸네일도 함께 넘어가고, 썸네일 슬라이더를 넘기면 메인도 같이 돌아간다. 또한 메인 사진을 클릭하여 팝업을 띄울 경우에도 메인 슬라이더와 연동이 되어..

animate() $("선택자").animate({ 속성:값, 속성:값 },시간,효과, 콜백함수); * 콜백함수 : 앞의 애니메이션 효과가 끝난 뒤 처리할 문장 * 효과 : easing 효과를 선택하여 쓸 수 있는데, 효과가 이미 저장되어있는 ui jQurey를 다운 받아서 사용 - 효과 확인 : https://easings.net - 다운로드 : https://jqueryui.com/ * animate 에서 background-color 사용을 위해서는 color.js가 필요 https://github.com/jquery/jquery-color jquery.color.plus-names-2.1.2.min.js 를 다운 받으면 영문색상이름에 헥사코드가 지정되어 있어 편리함 스크립트 연결 순서는 기본 제이..

기본효과 1. show() display:block 의 효과 2. hide() display:none의 효과 3. toggle() show()와 hide()의 반복 () 들어가는 값은 시간을 milisecond 단위로 적거나, fast, slow를 사용할 수 있다. $(".hide").click(function(){ $("div").hide(1000); }) $(".show").click(function(){ $("div").show("fast"); }) $(".toggle").click(function(){ $("div").toggle(1000); }) slide 효과 1. slideUp() - $("선택자").slideUp(시간,콜백함수()); 2. slideDown() - $("선택자").slide..

객체편집 메서드 가상요소 추가하기 before&after css처럼 제이쿼리에서도 마크업에 없는 가상 요소를 추가할 수 있다. 차이점은 css에서는 가상선택자 before, after가 inline요소이지만, 제이쿼리에서 before, after는 block 요소이다. $(function(){ $("p").before("before"); $("p").after("after"); }) prepend&append prepend, append를 사용하면 inline 요소로 넣을 수 있다. 독립된 요소라기 보다는 아래 예제에서 p 태그 안으로 내용이 추가 된다고 보면 된다. $(function(){ $("p").prepend("prepend"); $("p").append("append"); }) prependT..

수치조작 메서드 css와 관련된 메서드 1. width & height width() 너비 innerWidth() 너비+패딩 outerWidth() 너비+패딩,보더 height() innerHeight() outerHeight() - $("선택자").width(); - $("선택자").width(값); $(function(){ var w=$("div").width(); //사용자지정너비 var iw=$("div").innerWidth(); //패딩 포함 var ow=$("div").outerWidth(); //패딩, 보더 포함 console.log("width:"+w); console.log("inner width:"+iw); console.log("outer width:"+ow); var h=$("di..

속성조작 메서드 1. html() : html태그값을 얻어오거나, html태그 안에 내용을 변경시킬때 사용 $("선택자").html(); $("선택자").html("수정할내용"); 2. text() : html 태그의 내용물을 얻어오거나, 변경할때 $("선택자").text(); $("선택자").text("변경할 내용"); $(function(){ //h1의 html값을 얻어서 콘솔에 출력하기 console.log($("h1").html()); //h1의 내용을 를 넣어서 변경하기 $("h1").html(" 속성"); //h2중에서 첫번째 h2의 내용물 text console.log($("h2:eq(0)").text()); //h2중에서 두번째 h2의 내용물 text 변경 $("h2:eq(1)").text..