자바스크립트/DOM 예제 (5) 썸네일형 리스트형 버튼 클릭시 클립보드에 복사하는 방법 버튼을 클릭 했을 때 특정 글자를 클립보드로 복사하기 위해서는 먼저 복사하려는 글자가 담긴 엘리먼트를 불러와 엘리먼트의 textContent에 담긴 글자를 변수에 넣고 const text = document.getElementById('text').textContent; 류에서만 작동하는 select 메서드를 사용하기 위해 임시로 엘리먼트를 만들어 textarea의 textContent에 글자를 넣는다. const textarea = document.createElement('textarea'); textarea.textContent = text; 브라우저에 생성해야 select 메서드를 쓸 수 있으니 body에 append(추가)하고 document.body.append(textarea); 생성한 te.. 다른 곳을 클릭 했을 때 드롭다운 메뉴를 사라지게 하는 방법 버튼을 클릭 했을 때 드롭다운 메뉴가 나타나게 하는 것까지는 했다고 치자. 여기서 메뉴를 클릭하지 않고 다른 곳을 클릭 했을 때 드롭다운 메뉴가 사라지는 방법에 대해 다루겠다. 알고 보면 별 것 아닌데 모르면 어렵게 구현해야 한다. 1. HTML 클릭 서울 대전 대구 부산 반드시 button 엘리먼트를 써서 이벤트를 구현해야 한다. input류의 엘리먼트만 blur 이벤트가 적용되기 때문이다. (일반 엘리먼트에 blur 이벤트를 넣고 싶다면 tabindex 속성을 활용하자.) https://developer.mozilla.org/ko/docs/Web/HTML/Global_attributes/tabindex blur 이벤트는 선택이 해제됐을 때 발생하는 이벤트다. 버튼을 클릭했을 때 버튼을 선택한 상태가 .. 자바스크립트 div 엘리먼트를 스크린샷해서 이미지 파일로 만들기 이미지 파일의 속성에 따라서 안 되는 경우도 있으니 구글링해서 해결해야 한다. 로컬 드라이브에 있는 이미지 파일은 crossorigin="anonymous"을 쓰면 안 되는 것 같다. // 스크린샷을 할 div 엘리먼트를 가져온다. width와 height가 설정돼 있어야 한다. const captureDiv = document.getElementById('captureDiv'); // 버튼 등을 이용해서 적당한 때 함수를 호출한다. makeDivToImageFile(captureDiv); function saveAs(url, fileName) { const link = document.createElement('a'); link.href = url; link.download = fileName; doc.. 자바스크립트 그림 그리기 - canvas save 1. 그리기 기능 // 초기값 const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); canvas.width = 500; canvas.height = 500; context.strokeStyle = 'black'; context.lineWidth = 1; // path를 생성했는지 여부 let hasPath = false; function onMouseMove(event) { const x = event.offsetX; const y = event.offsetY; if(!hasPath) { // path 생성 context.beginPath(); // path의 좌표 지정 context.m.. 마우스를 올려 놓을 때 이벤트 발생 예제 1. HTML 2. CSS .over { margin: 100px; } 3. JS // 마우스를 올려놓을 때 document.getElementById('mountain').onmouseover = function() { this.setAttribute('class', 'over'); }; // 마우스를 올려놓지 않을 때 document.getElementById('mountain').onmouseout = function() { this.setAttribute('class', ''); }; 그림 위에 마우스를 올려 놓으면 그림에 margin: 100px 값이 생기면서 움직인다. 4. 더 나아가서 CSS를 아래처럼 바꾸면 애니메이션 효과도 줄 수 있다. // 마우스를 올려 놓으면 3초 동안 move라는 .. 이전 1 다음
