////

DOCTYPE html> Insert title here body*{ font-size: 1.2em; } #img{ max-width: 300px; position: absolute; left: 500px; top: 50px; border: 10px solid orange; border-radius: 30px; } 이미지를 선택하세요 사진1 사진2 사진3 사진4 선종류를 선택하세요 Solid Dot Dashd Double Groove Inset var img=document.getElementById("img"); var food=document.getElementById("selectimg"); //사진 변경 function selectImg() { img.setAttribute("src", selec..

DOCTYPE html> Insert title here #can{ border: 10px solid gold; cursor: crosshair; } #clr{ margin-left: 300px; } #clr div{ width: 30px; height: 30px; cursor: pointer; float: left; margin-left: 3px; } #clear,#eraser{ text-decoration: none; width: 130px; height: 40px; border: 2px solid green; border-radius: 50px; float: left; line-height: 40px; text-align: center; cursor: pointer; margin-left: 20px..

DOCTYPE html> Insert title here window.onload=function(){ //캔버스에 그림을 그리기위한 작업 var can=document.getElementById("can1"); //스윙의 graphics에 해당하는 것이 js에서는 context.. 그림을 그리는 메서드 var context=can.getContext("2d"); //선그리기 context.lineWidth=5; //선굵기 context.strokeStyle="red"; //선색상 context.lineCap="round"; //round,square //선그리기 시작 context.beginPath(); //원하는 위치로 이동..moveTo context.moveTo(10, 10); //선그리고 위치 ..

css @charset "UTF-8"; @import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap'); .seldate select,#calview{ font-family: 'Single Day'; font-size: 1.4em; width: 110px; } .seldate{ margin-left: 300px; } #calview{ margin-left: 250px; margin-top: 30px; } #calview table{ border-collapse: collapse; width: 800px; } #calview table tr{ height: 60px; } #calview table th{ border: 1px s..

DOCTYPE html> Insert title here table { width: 300px; border-collapse: collapse; } td,th { border: 1px solid #191970; } window.onload=function(){ //미리 찾아도 되고 나중에 찾아도 됨 var r=document.getElementById("result"); /* 출력용 div*/ var pro=document.getElementById("pro"); //프로그래스바 id //결과확인버튼이벤트..나중에 찾는 걸로 해보기 document.getElementById("btnresult").onclick=function(){ //이름 읽기 var name=document.getElementById..

DOCTYPE html> Insert title here #myimg{ position: absolute; } var myimg; var xpos=500; var ypos=300; window.onload=function(){ myimg=document.getElementById("myimg"); myimg.style.top=ypos+"px"; myimg.style.left=xpos+"px"; //키보드의 아스키코드값 확인 window.onkeyup=function(e){ console.log(e.keyCode); //4방향키와 엔터의 아스키코드값 //상:38 하:40 좌:37 우:39 엔터:13 switch(e.keyCode) { case 38: ypos-=10; myimg.style.top=ypos+..

DOCTYPE html> Insert title here #time{ font-size: 2em; margin-left: 100px; font-weight: bold; font-family: 'Comic Sans MS'; } #myimg{ /* 초기값 설정해줘야 setInterval 적용됨 */ position: absolute; } window.onload=function (){ //시간 function 따로 만든다음 여기서 호출 writeTime(); //1초마다 다시 시간 출력 setInterval(function() { writeTime(); }, 1000) //5초뒤에 딱 한번 이미지 위치변경 var xpos=200; var ypos=350; var myimg; myimg=document.get..

DOCTYPE html> Insert title here #myimg{ position: absolute; } #btngo{ margin-left: 400px; width: 150px; font-size: 20pt; position: relative; top: 200px; } #btnstop{ margin-left: 10px; width: 150px; font-size: 20pt; position: relative; top: 200px; } var myimg; var xpos=0; var ms=100; //setinterval에서 초단위 줄때 사용 window.onload=function(){ myimg=document.getElementById("myimg"); /* 기준점 */ //버튼 go docu..

DOCTYPE html> Insert title here #photo{ position: absolute; left: 500px; top: 150px; width: 400px; height: 500px; border: 5px groove gold; } #btnRandom{ margin-left: 400px; width: 100px; height: 100px; } window.onload=function(){ //배열에 10개의 이미지를 넣는다 var imgarr=new Array(); imgarr.push("../image/1.jpg"); imgarr.push("../image/2.jpg"); imgarr.push("../image/3.jpg"); imgarr.push("../image/4.jpg"); ..

DOCTYPE html> Insert title here 떡볶이 삼겹살 다코야끼 점점작게 점점크게 var b1=document.getElementById("btn1"); var b2=document.getElementById("btn2"); var b3=document.getElementById("btn3"); var b4=document.getElementById("btn4"); var b5=document.getElementById("btn5"); var img=document.getElementById("img1"); //버튼1..떡볶이 b1.onclick=function(){ img.setAttribute("src", "../image/떡볶이.png"); } //버튼2..삼겹살 b2.onclick..