////

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

DOCTYPE html> Insert title here table { border: 3px solid green; width: 500px; border-collapse: collapse; margin-left: auto; margin-right: auto; } th,td { border: 1px solid black; } #result { width: 500px; height: 300px; font-size: 1.3em; border: 2px inset gray; margin-top: 20px; padding: 5px 10px; margin-left: auto; margin-right: auto; } 폼 태그들 연습 이름 비밀번호 혈액형 A형 B형 AB형 O형 생년월일 취미 낚시 게임 여행 영화감상 결..

DOCTYPE html> Insert title here #out{ font-family: 'Do Hyeon', sans-serif; padding: 20px 20px; width: 500px; margin-top: 50px; border: 0px solid black; } //버튼이벤트_3씩 감소/증가 //8보다 작아지면 alert:더이상 줄일수 없습니다 후에 프로그램 종료, 60보다 커지면 alert:~ 종료 //버튼 클릭시마다 현재 글꼴사이즈를 fsize에 저장 window.onload=function (){ var fsize=document.getElementById("fsize"); var out=document.getElementById("out"); fsize.innerHTML="현재 글꼴 ..

DOCTYPE html> Insert title here #btn{ margin-left: 30px; margin-bottom: 20px; } function photoSmall() { var myimg=document.getElementById("myimg"); //myimg의 width속성 가져오기 var w=myimg.getAttribute("width"); console.log(typeof(w)); //w속성을 콘솔창에 찍어보기 w-=10; //string타입이라 하더라도 -,*는 숫자로 계산됨(+만 안 되기에 콘솔창에 찍어보는 것) myimg.setAttribute("width",w); } function photoLarge() { var myimg=document.getElementById("..

DOCTYPE html> Insert title here #result img{ max-width: 300px; } 이미지출력 //배열에 이미지 var imgarr=new Array(); //imgarr[0]=""; //imgarr.push(""); 둘 중 하나로 imgarr.push("../cat/IMG_5126.JPG"); imgarr.push("../cat/IMG_5188.JPG"); imgarr.push("../cat/IMG_5507.JPG"); imgarr.push("../cat/IMG_6535.JPG"); imgarr.push("../cat/IMG_6600.JPG"); var r=document.getElementById("result"); function writeImage() { var i..

DOCTYPE html> Insert title here button { width: 100px; height: 30px; background-color: #e6e6fa; color: white; border-radius: 30px; margin-left: 10px; } div img{ max-width: 130px; /* 130이 넘을 경우만 적용 */ } shop star minions /* 헤드에 스크립트를 안 뒀기에 window.onload 안 해도 됨 */ var r=document.getElementById("result"); //버튼1 function buttonOne() { var a=confirm("상품을 출력할까요?"); if(a){ r.innerHTML+=""; } } //버튼2 fu..

DOCTYPE html> Insert title here img { width: 100px; border: 2px groove pink; } .mybtn{ width: 120px; height: 30px; font-size: 12pt; background: green; color: white; border-radius: 30px; /* 100px은 원 */ } /* 헤드태그에서 스트립트 사용시 window.onloade 사용 */ window.onload=function(){ /* id로 해당 요소값 읽어오기 */ btn1=document.getElementById("btn1"); btn2=document.getElementById("btn2"); btn3=document.getElementById("b..

DOCTYPE html> Insert title here function make() { alert("스크립트 함수 호출"); } function gofile(url) { location.href=url; //location.href 이동함수 } 자바스크립트 함수 호출 파일호출

DOCTYPE html> Insert title here .test{ width: 100px; } .result{ width: 500px; height: 300px; } #img_div{ position: absolute; left: 500px; top: 100px; cursor: pointer; /* 커서포인터 : 링크기능있는 걸 알수있도록 커서모양 바꿔줌 */ } #result_div>img { position: absolute; left: 350px; top: 300px; width: 600px; height: 350px; } /* (방법1) window.onload=function(){ //1.id로 객체 읽어오기..개수가 많을 때는 배열처리 img1=document.getElementById("..

(dataOpen.html) DOCTYPE html> Insert title here function dataOpen(){ window.open('ex8_dataSend.html','w','width=300,height=200'); /*코드 중에서 'w'는 그냥 아무 이름 붙인 거 */ } 이름 주소 연락처 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ (dataSend.html) DOCTYPE html> Insert title here function dataSend(){ /* opener는 현재 열려있는 곳을 의미..여기선 dataopen */ opener.frm.name.value=frm.name.value; opener.frm.addr.value=frm.addr.valu..

DOCTYPE html> Insert title here #out{ position: absolute; top: 50px; border: 1px solid gray; width: 300px; height: 200px; padding-left: 10 10px; background-color: #ffc; font-size: 11pt; } var rnd; var cnt=0; window.onload=function(){ rnd=parseInt(Math.random()*100)+1; } function check(su) { /* su를 파라메타값으로 넘김 */ //숫자를 이미지로 변환해서 출력 if(su=10 && surnd) out.innerHTML+=cnt+":"+su+"보다 작습니다 "; //out.inn..