////

DOCTYPE html> Insert title here button { width: 120px; height: 40px; border-radius: 20px; font-size: 1.3em; font-family: 'Do Hyeon'; cursor: pointer; } button.a{ background-color: #fafad2; } button.b{ background-color: #87ceeb; } div { position: absolute; width: 300px; height: 150px; font-size: 20px; font-family: 'Do Hyeon'; } #one{ left: 50px; top: 100px; } #two{ left: 300px; top: 100px; } #thr..

DOCTYPE html> Insert title here $(function () { //정적이벤트 //최초에만 가능하고 추가된 element에는 버튼 추가 기능이 없음(부모의 이벤트 없음) /* $("button[name='add']").on("click", function() { $('body').append("B"); }); */ //동적이벤트 가능하게 변경 //추가된 element에 계속해서 부모의 이벤트를 가질 수 있게 만든다 //on(이벤트, 지정자, 구현부function) $(document).on("click", "button[name='add']", function() { $('body').append("B"); }); }); B

//on: 1.8이전에는 live 사용 //처음부터 존재하는 요소나 미래에 생기게 될 요소에 모두 이벤트 가능 DOCTYPE html> Insert title here $(function () { //jquery on("click")과 click() 차이 //동적으로 이벤트를 바인딩할 수 있는지의 차이 //click()은 최초에 선언된 element에만 동작 가능 //두번째 파라메타에선 지정자를 선택 가능..on("click",지정자,,function()) /* //정적이벤트 $("#mylang").children().click(function() { $(this).remove(); }); //li태그 추가 //정적인 이벤트는 추가된후 삭제 안됨(최초에 선언한 엘리멘트만 동작가능) $("#mylang")..

DOCTYPE html> Insert title here 애니메이션#1 애니메이션#2 $("#box").css({ "width":"100px", "height":"100px", "border":"1px solid red" }); //버튼이벤트..id 안 줬을때 $("button:eq(0)").click(function() { $("#box").animate({width: "+=100px", borderWidth: "20px",opacity: "0.2", marginLeft: "300px"},3000); }); $("button:eq(1)").click(function() { $("#box").animate({width: "-=100px", borderWidth: "1px",opacity: "1", mar..

DOCTYPE html> Insert title here .fg{ float: left; } .fg img { border: 5px groove orange; border-radius: 50px; padding: 10px; cursor: pointer; } .fg figcaption{ font-family: 'Do Hyeon'; font-weight: bold; font-size: 1.3em; } .large{ width: 450px; height: 500px; position: absolute; left: 400px; top: 220px; border: 5px inset gold; } //결과.. 작은 이미지 누르면 div.large에 나타내기 $(function () { //큰이미지 $("img.la..

DOCTYPE html> Insert title here div.box { border: 5px solid tomato; margin-top: 20px; width: 300px; height: 120px; padding: 20px 20px; font-family: 'Nanum Pen Script'; font-size: 1.3em; } 배열반복시 사용하는 $.each문 var data1=["magenta","blue","orange","gray","yellow","green"]; /* i는 인덱스로 0번부터, elt는 element(인덱스에 해당하는 아이템값)로 생략가능 */ $.each(data1, function(i, elt) { var s=""+elt+""; document.write(s); }); ..

DOCTYPE html> Insert title here 이미지 아래에 제목달고 싶을 때 #1 이미지1 이미지2 이미지 아래에 제목달고 싶을 때 #2 이미지3 이미지4

DOCTYPE html> Insert title here .red{color: red;} .green{color: green;} .blue{color: blue;} /* 그냥 b만 써도 되나 관계공부를 위해 */ /* div의 content red,green,blue를 한꺼번에 부를려면 공통단어인 content */ div.content>b{ cursor: pointer; font-family: 'Nanum Pen Script'; font-size: 25pt; } /* 그냥 h5로 해도 됨 */ div.answer>h5 { text-indent: 30px; /* 들여쓰기 */ } $(function() { //댓글숨기기 $("div.answer").hide(); //내용 클릭시 그 내용의 댓글만 보이고 ..

DOCTYPE html> Insert title here #one{ position: relative; width: 50px; height: 50px; background-color: pink; border: 1px solid magenta; } $("#img1").animate({width: "200px",opacity: "0.5"},"slow"); $("#img1").animate({width: "100px",opacity: "1"},"slow",function(){ //애니메이션이 끝난후 처리 //alert("애니메이션 종료~"); $(this).after("THE END"); }); $("#one").animate({left:"+=60"},2000).animate({borderWidth: "10p..

DOCTYPE html> Insert title here Hide Show Toggle SlideUp SlideDown SlideToggle FadeOut FadeIn FadeToggle FadeTo Have a Nice Day!!! $("#btn1").click(function() { $("#msg").hide(); $("#img1").hide(); }); $("#btn2").click(function() { $("#msg").show(); $("#img1").show(); }); $("#btn3").click(function() { $("#msg").toggle(); $("#img1").toggle(); }); $("#btn4").click(function() { $("#msg").slideUp('f..