////

DOCTYPE html> Insert title here 부트스트랩 이미지들 부트스트랩 이미지들 좋아요 싫어요 Search Downloads Home

DOCTYPE html> Insert title here Large Buttons btn btn-default btn-success btn-danger btn-info btn-warning Medium Buttons btn btn-default btn-success btn-danger btn-info btn-warning Small Buttons btn btn-default btn-success btn-danger btn-info btn-warning Very Small Buttons btn btn-default btn-success btn-danger btn-info btn-warning 버튼 그룹들 ADD UPDATE LIST ADD UPDATE LIST ADD UPDATE LIST

DOCTYPE html> Insert title here 테이블디자인연습_부트스트랩_#1 First Name Last Name E_Mail 홍 길동 hkd@gmail.com 박 명수 djpark@gmail.com 유 재석 mcy@gmail.com 테이블디자인연습_부트스트랩_#2 First Name Last Name E_Mail 홍 길동 hkd@gmail.com 박 명수 djpark@gmail.com 유 재석 mcy@gmail.com 테이블디자인연습_부트스트랩_#3 First Name Last Name E_Mail 홍 길동 hkd@gmail.com 박 명수 djpark@gmail.com 유 재석 mcy@gmail.com

css @charset "UTF-8"; body{ margin: 0; padding: 0; } li{ list-style: none; } body.html{ height: 100%; overflow: hidden; /* 스크롤바 숨기기 */ } body{ background: #fff1cb url("../image/bg.png") center center; background-size: cover; } #sunban-wrapper{ width: 800px; margin: 50px auto; } #control-wrapper{ width: 300px; height: 420px; position: fixed; left: 0; bottom: 0; } .sunban{ height: 150px; margin-bo..

DOCTYPE html> Insert title here table { border-collapse: collapse; } td { border: 1px solid gray; } .small img{ width: 80px; height: 100px; } .large{ width: 280px; height: 330px; } p { font-weight: bold; } .select{ background-color: #ffffe0; color: gray; font-size: 1.2em; } $(function () { $("a.small").click(function(e) { //기본이벤트(링크되는거)를 무효화 e.preventDefault(); //td에 select클래스를 추가 $(this).parent..

DOCTYPE html> Insert title here div.cara { cursor: pointer; } div.carb { position: absolute; left: 300px; top: 80px; } $(function () { //작은 자동차 이미지 넣기..배열로 var s=""; for(var i=1;i

DOCTYPE html> Insert title here div.wall { position: absolute; width: 200px; height: 500px; background-image: url("../image/bg2.png"); z-index: 2; } #img1{ position: absolute; left: 140px; top: 100px; width: 150px; height: 200px; z-index: 1; } $(function () { $("#img1").click(function() { //3번째 함수는 너비가 0되면 호출되는 함수 $(this).animate({width: "0px"},'slow',function(){ $(this).animate({width: "150px"}..

DOCTYPE html> Insert title here /* gun.png의 사이즈 300*500 */ #gun{ width: 300px; height: 250px; background-image: url("../image/gun.png"); } #gun:active { background-position: right bottom; /* 100% 100%와 같음 */ } div.cover{ position: absolute; left: 100px; top: 350px; background-image: url("../image/cover.png"); width: 350px; height: 300px; background-size: 350px 300px; z-index: 2; } div.cd1{ posit..

DOCTYPE html> Insert title here h3 { width: 400px; height: 40px; border: 1px solid #000; line-height: 40px; border-radius: 20px; padding-left: 20px; text-shadow: 10px 10px 20px yellow; cursor: pointer; } h3:active { border: 5px solid gray; } div { position: absolute; border: 2px solid gray; width: 300px; height: 300px; border-radius: 200px; } div.pink { left: 200px; top: 200px; background-color:..

DOCTYPE html> Insert title here Start Start Start $("h2").click(function() { //별추가#1 $(this).append("*"); //별추가#2 /* $(this).html(function (idx,html) { return html+"*"; }); */ }); setInterval(function() { $("h2:last").trigger("click"); //이벤트 강제 발생..별추가#1 주석 풀어야 함 }, 1000); $("#camera").click(function() { $("#file").trigger("click"); });

DOCTYPE html> Insert title here body,h1,ul { margin: 0; padding: 0; } li { list-style: none; } body { background-color: #fff; } div.wall{ width: 800px; height: 600px; margin: 50px auto; background-color: #999; position: relative; border-radius: 5px; border: 5px solid #333; overflow: hidden; /* 스크롤바 해제..기본은 auto */ } h1.title{ font-size: 37px; position: absolute; right: 50px; top: 60px; width: 13..

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