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 를 다운 받으면 영문색상이름에 헥사코드가 지정되어 있어 편리함 스크립트 연결 순서는 기본 제이..

부트스트랩 모바일 환경에 적합한 반응형 웹 만드는 데에 혁신적, GitHub 오픈소스 제품 사용법 1. 다운로드 2. CDN (contents Delivery Network) 3. Bower 패키지 이용 부트스트랩 공식 홈페이지 http://getbootstrap.com/ Bootstrap The most popular HTML, CSS, and JS library in the world. getbootstrap.com 부트스트랩 한국어 버전 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를..

기본효과 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..