////

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..

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> 리스트_OL_UL body{ font-size: 20pt; } li{ list-style: none; } 나라별 치즈의 종류 로크포르 브리피즈, 블루치즈, 카망베르치즈, 리바로, 콩테 스틸턴 하우다치즈, 체다치즈 모짜렐라치즈

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..

DOCTYPE html> Insert title here div { border: 1px solid gray; padding: 20px 20px 20px 20px; width: 500px; margin-bottom: 10px; } 폼태그연습 #1 아이디 비밀번호 //input에 포커스가 갈 경우 배경색 $("input:text,input:password").focus(function() { $(this).css("background-color", "yellow"); }); //포커스가 벗어날 경우 다시 원래대로(흰색) $("input:text,input:password").blur(function() { $(this).css("background-color", "white"); }) 폼태그연습 #2 운전..

DOCTYPE html> Insert title here 1번 영역을 복사해서 3번 영역에 추가 2번 영역을 복사해서 4번 영역에 추가 3,4번 영역 지우기 1번 박스 2번 박스 3번 박스 4번 박스 $("#btn1").click(function() { //box1 아래의 모든 img태그 복사 var no1=$("#box1").find("img").clone(); //3번 영역에 추가 $("#box3").append(no1); }); $("#btn2").click(function() { //box1 아래의 모든 img태그 복사 var no2=$("#box2").find("img").clone(); //3번 영역에 추가 $("#box4").append(no2); }); //3번..remove $("#btn..

DOCTYPE html> Insert title here 오늘의 쇼핑 리스트 운동화 레깅스 양말 져지 안심스테이크 오늘의 메뉴 선택 초밥 스테이크 떡볶이 김치찌개 //ol 아래에 있는 모든 li 중 첫번째 li //$("ol li:first").css("background-color", "yellow"); //각 ol의 첫번째 li만 선택..child $("ol li:first-child").css("background-color", "yellow"); //전체항목에서 '스테이크'를 찾아서 글자크기 1.5배..contains $("li:contains(스테이크)").css("font-size", "1.5em"); //li의 홀수의 css변경..odd홀수, even짝수 $("li:odd").css("bor..

myscript.js /** * */ function randomColor(){ //0~255 var r=parseInt(Math.random()*256); var g=parseInt(Math.random()*256); var b=parseInt(Math.random()*256); var color="rgb("+r+","+g+","+b+")"; return color; } ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ html DOCTYPE html> Insert title here //js myscript 링크 삽입 div { width: 80px; height: 80px; float: left; border-radius: 100px; margin-right: 10px;..

DOCTYPE html> Insert title here 이름 JAVA ORACLE HTML 결과출력 $("table").css({ "border":"2px inset gray", "border-collapse":"collapse" }); $("th,td").css({ "border":"1px solid gray" }); $("th").css("background-color","pink"); //버튼이벤트 $("#btn").click(function() { //각각의 id값 얻어오기 var name=$("#name").val(); var java=$("#java").val(); var oracle=$("#oracle").val(); var html=$("#html").val(); //각각 null값 체크..

DOCTYPE html> Insert title here 01234 $("div").css({ "width":"120px", "height":"120px", "border":"2px solid black", "float":"left", "font-size":"20pt", "text-align":"center", "line-height":"120px", /* 줄간격 */ "cursor":"pointer", "margin-right":"5px" }); $("span").css("font-size","20pt"); //div의 크기를 일정하게 지정한 후 랜덤 색상 만들기..배경색으로 설정 for (var i = 0; i