웹프로그래밍
-
CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드Knowledge/javascript 2019. 8. 13. 18:30
일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는 알아보기 좋게 배경색과 border를 좀 추가해서 준비했다 코드로 보면 아래와 같다 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 56 슬라이드 무한 슬라이드 body * { height: 50px; } .slide_box{ width: 200px; position: rela..
-
script 태그 위치와 onload, DOMContentLoaded, readyKnowledge/javascript 2019. 8. 13. 15:10
script는 아무 데나 넣을 수 있다. 그러나 아무 데나 놔서는 안된다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOMContentLoaded var target = document.querySelector('div'); console.log(target); 시작 중간 끝 이 코드는 아래와 같은 결과가 나온다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 DOMContentLoaded 시작 var target = document.querySelector('div'); console.log(target); 중간 끝 이 코드는 아래와 같은 결과가 나오고.. 뻔한 중간은 건너뛰고 script를 바로 위에 위치시키면 그제서야 비로소 의도한 결과를 얻을 수 있..
-
자바스크립트로 리스트에 이벤트 다는 방법 ( Event delegation / 이벤트 위임 )Knowledge/javascript 2019. 8. 12. 21:51
먼저 자바스크립트로 이벤트를 걸기 위해선 어떻게 해야할까? querySelector나 getElementBy를 활용해 이벤트를 걸 대상을 찾고 addEventListener를 활용해 원하는 이벤트를 걸어주면 된다 코드로 보면 아래와 같다 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 자바스크립트 이벤트 #target { width: 100px; height: 100px; background: blue; }; document.querySelector("#target").addEventListener("click",function(){ alert("테스트"); }); 그렇다면 같은 클래스명을 공유하는 여러개의 엘리먼트에 한번에 이벤트를 ..