자바스크립트 중에 clipboard.js 라는 라이브러리가 있는데,이걸로 우리는 아주 쉽게 클립보드 기능을 구현할 수 있어요. 아래의 링크로 접속하여 파일을 다운로드 하거나,https://clipboardjs.com/ clipboard.jsA modern approach to copy text to clipboard. No Flash. No frameworks. Just 3kb gzippedclipboardjs.com아래에 올려놓은 CDN 스크립트를 HTML에 삽입해주세요. 1. JavaScript let clipboard = new Clipboard('a'); clipboard.on('success', function(e) { console.log(e); }); clipboard.on('error'..
Frontend/JavaScript
jQuery를 사용하여 작업을 하다가 clientHeight, clientWidth 값이 undefiend 가 뜰때 해결방법입니다. 1. console.log($(element)) 먼저 콘솔로 값을 찾고싶은 엘리먼트를 찍어주고 새로고침하여 콘솔창을 리로드합니다.그럼 이런식으로 console 창에 요소 정보들이 나열되는데,우리가 구하려는 clientWidth, clientHeight는 0 이라는 배열에 정보가 담기는것을 확인할 수 있습니다. 2.$(element).clientHeight 를 스크립트 작성하면 undefiend값이 뜨지만$(element)[0] 를 사용하면 객체값에 정상적으로 접근되게 됩니다. let e = $(element)[0]let eHeight = e.clientHeight;let e..
목표.slideDown(), .slideUp() 함수를 이용하여 마우스 오버시 작동되는 드롭다운 메뉴 구현하기HTML 마크업 컴퓨터 조립PC 할인안내 마우스 2만원 이하 5만원 이하 키보드 게이밍 사무용 CSS 1. 먼저 1차 카테고리 역할을 할 li를 정렬 해 줍니다. 기능만 구현 할 것이기 때문에 최소한의 꾸밈 없이 진행합니..
https://github.com/kenwheeler/slick/issues/3271 Slick Center Mode - Animations Bug between last and first slide · Issue #3271 · kenwheeler/slickHello, I'm using SLICK in center mode with some CSS animations but i have a bug, like a rebound of animations, between last and first slide. Do you have any idea to stop this rebound ? Thanks a lot...github.com 해당 문제infinite : true 일때 첫 슬라이드와 마지막 슬라이드의 애..
목표.on('click',function(){}) 함수에 대해 알아보자. 함수.on('click',function(){발생시킬 이벤트 함수 작성})이 함수는 .bind() 함수를 사용하지 않아도 this 값을 쉽게 잡아줄 수 있어 사용하기 편한 함수입니다..on('타입',function(){}) 함수의 '타입' 에는 click 이 아닌 다른 이벤트도 들어갈 수 있습니다.그건 나중에 따로 다루도록 하겠습니다. 학습1. HTML 우리는 스크립트만 다루면 되기 때문에 최소한의 마크업을 해주었습니다. 이 버튼을 클릭 해 보세요. 2. JavaScript이 함수를 입력하고 버튼을 클릭하면 개발자 모드(F12) 로 접속하여 콘솔창에 '클릭 되었어요' 라는 문구가 뜹니다.$(function(){ console.lo..
목표 append, appendTo, prepend, prependTo 함수에 대해 알아보자. 함수 1) append(), appendTo() : 원하는 요소를 '맨 뒤' 에 추가하는 함수. 2) prepend(), prependTo() : 원하는 요소를 '맨 앞' 에 추가하는 함수. 학습 1) HTML 마크업 안녕하세요. 배가고파요. 2) JacaScript A, B 의 위치를 정확하게 파악할것. $(function(){ console.log('연결성공!') //A = 새로 추가할 내용 //B = A가 추가될 요소(태그) //append = B의 맨 마지막에 추가됨. //appendTo //A.appendTo(B) $('이건 뒤에 추가되는 append() ').appendTo('div > ul') //..
목표 J Query 를 이용하여 간단하게 좌우 슬라이드 만들어보겠습니다. 워낙 예전에 배웠던 거라서 기억이 나지 않아 복습 겸, 기록 겸 남깁니다. 마크업 /* part1.html */ slide1 slide2 slide3 slide4 1 2 3 저는 2개의 리스트를 만들었습니다. ul : 슬라이더 (이미지 영역) ol : 페이지네이션 (버튼 영역) 이미지 구하기 이제 실습에 재미를 더하기 위해 본인이 원하는 사진 4장을 가져오도록 합시다. CSS 그리고 가지고 온 이미지들을 slide 1, 2, 3, 4 영역에 각 자 넣어주고, css를 사용하여 보기 좋게 정리 해 줍니다. /* part1.css */ @charset 'UTF-8'; *{ margin:0; padding:0; } ol, ul, li {..
