신입 개발자 복습일지

DOCTYPE html> $(document).ready(function(){ $("#user_id_1,#user_pw_1").on("focus",function(){ $(this).css({"background-color":"grey"}) }) $("#user_id_1,#user_pw_1").on("blur",function(){ $(this).css({"background-color":"#fff"}) }) }) Document focus / blur ID PW focus - 포커스를 받을때 blur - 포커스를 잃을때 발생

DOCTYPE html> body{ height:10000px; width:5000px; } #wrap{ position: fixed; left:10px; top:10px; width:200px; height:200px; background-color: aqua; } $(document).ready(function(){ $(window).on("scroll",function(){ var sc_top=$(this).scrollTop() var sc_left=$(this).scrollLeft() $('.top').text(sc_top) $('.left').text(sc_left) }) }) Document ScrollTop:0px ScrollLeft:0px scrollTop값과 scrollLeft값을 실시간..

DOCTYPE html> #wrap{ width:500px; height:300px; background-color: rgb(36, 35, 35); padding-top:40px; padding-left:40px; box-sizing: border-box; } #piano{ width:400px; height:200px; background-color: white; position: relative; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; border: 2px solid white; /* box-sizing: border-box; */ } .a{ border-bottom-left-radius: 10px; border-bott..

DOCTYPE html> 회원가입 약관동의 $(function(){ $("#allCheck").click(function(){ if($("#allCheck").is(":checked")==false){ $('.check').prop('checked',false) } else if($("#allCheck").is(":checked")==true) { $('.check').prop('checked',true) } }) }) $(function(){ $("#abc").click(function(){ var agree = document.getElementsByClassName('check') var count = 0 for(var i=0; i

DOCTYPE html> Document $(function(){ $("#idBox").click(function(){ $("#idBox").attr("value","") }) $("#look").click(function(){ var passwordType = document.getElementById("password").type if(passwordType == "password"){ $("#password").attr("type","text") } else if(passwordType == "text") { $("#password").attr("type","password") } }) }) G마켓 로그인 아이디 : 비밀번호 : 표시/숨김

DOCTYPE html> Image slide var imageBox = [{name:"image1",add:"../images/1.JPG"}, {name:"image2",add:"../images/2.JPG"}, {name:"image3",add:"../images/3.JPG"}] var count = 0 function next(){ if(count0){ count-- } else if(count==0) { count=2 } $(function() { $('#image').attr("src",imageBox[count].add) }) } 이전 사진 다음 사진

$(function(){ $("#li4").prevAll().css(~~) li4 이전 모든요소 $("#li4").nextAll().css(~~) li4 이후 모든요소 $("#li4").prevUntil("#li1").css(~~) li4 이후부터 li1 이전까지 $("#li4").nextUntil("#li7").css(~~) li4 이후부터 li7 이전까지 $("#ul > li").even().css(~~) 홀수번째 li $("#ul > li").odd().css(~~) 짝수번째 li $("#ul > li").eq(n).css(~~) eq - equal , n번째를 선택 $("#ul>li:lt(3)").css(~) 3번 인덱스 기준으로 이전 (less than) $("#ul>li:gt(3)").css(..

DOCTYPE html> SideNav ul{ list-style: none; } a{ text-decoration: none; font-size:20px; } *{ padding:0; margin:0; } html,body{ height:100%; overflow:hidden; } #wrap{ width:100%; height:100%; background-color: skyblue; position: relative; } #Nav{ width:350px; height:100%; background-color: white; display:none; position: relative; } #Nav > ul > li{ width:350px; height:50px; margin-bottom:20px; pad..

DOCTYPE html> Document ul{ list-style: none; } a{ text-decoration: none; } *{ padding:0; margin:0; } #header{ width:100%; height:100px; /* background-color: aqua; */ } #menu { float:left; } #menu > li { display: inline-block; margin-left:50px; padding-top:40px; box-sizing: border-box; } #icon > li { float:right; margin-left:10px; padding-top:20px; box-sizing: border-box; } #icon > li > a > img {..

DOCTYPE html> Counter html,body{ height:100%; overflow:hidden; } #wrap{ width:100%; height:100%; background-color: rgb(209, 246, 234); display:flex; align-items: center; } #counter_box{ width:600px; height:500px; /* background-color: red; */ } #counter{ font-size:30px; text-align: center; } #num{ text-align: center; font-size:25px; } #decrease{ display:inline-block; width:100px; height:50px; col..