////

DOCTYPE html> Insert title here a { text-decoration: none; } ul li { list-style: none; } li.main{ float: left; } li.main>a { display: block; width: 180px; color: gray; font-weight: bold; font-family: 'Nanum Pen Script'; } li.main>a:hover{ color: orange; } ul.sub { margin-left: 0; font-size: 13pt; font-family: 'Nanum Pen Script'; margin-top: 15px; } ul.sub>li>a { display: block; width: 180px; hei..

DOCTYPE html> Insert title here div.sist { position: absolute; left: 300px; width: 250px; height: 300px; border: 2px groove gray; border-radius: 30px; top: 100px; } ul li{ list-style: none; } ul.menu>li { font-size: 2em; font-family: 'Nanum Pen Script'; font-weight: bold; cursor: pointer; } ul.submenu>li { font-size: 24pt; font-family: 'Oswald', sans-serif; } ul.submenu>li:hover { background-col..

DOCTYPE html> Insert title here ul,li { list-style: none; padding: 0; margin: 0; } ul li{ float: left; width: 150px; height: 50px; line-height: 50px; text-align: center; border: 1px solid tomato; margin: 0 5px; } .bg{ background: tomato; color: #fff; } 메뉴1 메뉴2 메뉴3 메뉴4 $("ul li").hover(function() { $(this).addClass("bg"); }, function() { $(this).removeClass("bg"); });

DOCTYPE html> Insert title here body,ul,li{ margin: 0px; padding: 0px; } div#logo { width: 250px; height: 130px; margin: 100px auto; cursor: pointer; } ul #list { width: 900px; margin: 50px auto; } li { list-style: none; float: left; cursor: pointer; width: 150px; height: 230px; margin-left: 50px; } //각각의 이미지 클릭시 사라지게 $("li img").click(function() { $(this).fadeOut(); }); //제목 누르면 다시 이미지 나타나게 하면서..

DOCTYPE html> Insert title here 투명도30% 투명도100% 제목 $("#btn1").click(function() { //$("h1").fadeOut(); 사라지기 $("h1").fadeTo(1000, 0.3); //1초안에 30% (밀리언초, 0~1 투명도) }); $("#btn2").click(function() { //$("h1").fadeIn(); 없어진거 다시 생김 $("h1").fadeTo(1000, 1); });

DOCTYPE html> Insert title here 첫번째 div div하나 둘 셋 h3 Tag h4 Tag 두번째 div div하나 둘 셋 h3 Tag h4 Tag //parent():부모태그 //siblings():형제태그 //children():자식태그 //next():선택한 요소의 다음에 위치한 형제요소 //prev():선택한 요소의 바로 이전에 위치한 형제요소 $("div.one div.hana").siblings().css("color", "red"); $("div").children("div.hana").css("text-decoration", "underline"); $("div.hana").next().next().css("background-color", "yellow"); $("..

DOCTYPE html> Insert title here //1번째 이미지 hover $("img:eq(0)").hover(function() { //45 회전..angle은 각크기, 단위는 deg,rad,grad,turn(1회전=360deg) $(this).css("transform", "rotate(180deg)"); }, function() { $(this).css("transform", "rotate(0deg)"); }) //2번째 이미지에 -45도 회전했다가 제자리 $("img:eq(1)").hover(function() { $(this).css("transform", "rotate(-45deg)"); }, function() { $(this).css("transform", "rotate(0de..

DOCTYPE html> Insert title here div.right { position: absolute; left: 300px; border: 10px solid gray; padding: 20px; } 이미지 선택 이미지1 이미지2 이미지3 이미지4 이미지5 테두리선 선택 실선 점선 파선 입체선 박스그림자 그림자 넣기 //이미지 선택하면 change이벤트 $("#selImage").change(function() { //현재 내가 선택한 이미지 /* var im=$(this).val(); $("div.right img").attr("src", im); 아래처럼 한줄로도 가능*/ $("div.right img").attr("src", $(this).val()); }); //테두리선 선택시 cli..

DOCTYPE html> Insert title here body { font-family: 'Nanum Pen Script'; font-size: 13pt; } table { border: 1px solid gray; border-collapse: collapse; } th,td { border: 1px solid gray; } th { width: 100px; background-color: #ffc; } #result{ margin-top: 30px; width: 400px; height: 300px; padding: 10px 10px; border: 2px groove gray; } $(function () { //핸드폰 4글자 입력시 다음칸으로 마우스커서 이동 $("#hp2").keyup(fun..

DOCTYPE html> Insert title here .bg_0{ background-color: orange; color: gray; } .bg_1{ background-color: lavender; color: purple; } .bg_2{ background-color: blue; color: white; } .bg_3{ background-color: green; color: white; } .bg_4{ background-color: pink; color: red; } ul li { width: 130px; } //b태그 개수만큼 자동반복 //i는 index 0부터 //element는 인덱스에 해당하는 b태그..생략가능 $("b").each(function(i, element) { $(thi..