개발

Class 객체 생성연습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 Document var barArray=new Array; var wrapper; var count=0; var colorArray=["red","orange","yellow","green","blue","navy","purple"]; var flag=true; function init(){ wrapper=document.getElementById("wrapper"); wrapper.style.width=500..

아스키 코드 출력예제 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Document window.addEventListener("load", function(){ document.body.addEventListener("keydown", function(e){ console.log(e.keyCode, e.key) }) }) Colored by Color Scripter cs

이벤트 명 설명 change 변동이 있을 때 발생 click 클릭 시 발생 focus 포커스를 얻었을 때 발생 keydown 키를 눌렀을 때 발생 keyup 키에서 손을 땟을 때 발생 load 로드가 완료 되었을 때 발생 mousedown 마우스를 클릭 했을 때 발생 mouseout 마우스가 특정 객체 밖으로 나갔을 때 발생 mouseover 마우스가 특정 객체 위로 올려졌을 때 발생 mousemove 마우스가 움직였을 때 발생 mouseup 마우스에서 손을 땟을 때 발생 select option 태그 등에서 선택을 햇을 때 발생 click 사용예제 addEventListener의 클릭 이벤트와 event.clientX, event.clientY를 응용한 클릭하여 이동시키는 예제 1 2 3 4 5 6 7..

1단계! 1버튼으로 x축 50~500 사이로만 왔다갔다 하게하기! 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Document img{ position: absolute; top: 50px; left: 50px; } var flag=true; var x=50; function moveFunc(){ (flag)? x+=50:x-=50; document.querySelector("img").style.left=x+"px"; document.querySelector("#txt").value=x; ((x==500)||(x==50))? flag=!flag:0; } move! X값 Colored by Color..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 Document .wrapper{ margin: auto; width: 900px; height: 600px; background-color: red; overflow:hidden; } .left-side{ width: 150px; height: 100%; background-color: aquamarine; float: left; } #content{ width: 750px; height: 100%; background-colo..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 Document #wrapper{ background-image: url(../images/room.jpg); background-size: cover; width: 900px; height: 622px; margin: auto; position: relative; } #wrapper img{ width: 35px; position: absolute; top: 0px; } #surface{ background-color: black; width: 100%; height: 100..