You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌐 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기
HTML 드래그 앤 드롭 사용법 드래그(drag)와 드롭(drop)은 컴퓨터를 이용하면서 정말 많이 사용하는 기능 중에 하나일 것이다. 파일 애플리케이션에서 문서를 복사해 이동하는 것 부터 주문 하려는 물건을 장바구니에 드롭하는 것 까지 일상생활에서 많이 접해 봤을 것이다. HTML 그리고 JavaScript에서의 드래그 드롭은 이벤트 기반으로 작동하게 되는데, 마우스 커서로 객체(object)를 드래그해서 놓을 때까지 여러 단계의 이벤트가 순차적으로 발생하게 되어 동작이 완료되게 된다. 이번 포스팅에서는 자바스크립트를 이용해 드래그 앤 드롭 이벤트 동작 원리를 이해하고 여러 예제를 구현하는 시간을 가져볼 예정이다. 드래그 & 드롭 이벤트 종류 HTML에서 요소가 드래그 이벤트가 발생 할 수 있도록 해당..
🎨 Dropzone - 이미지 & 파일 업로드 (드래그 앤 드롭) 라이브러리
Dropzone.js Dropzone.js는 프론트 페이지에서 사용하는 대표적인 파일 업로드 라이브러리이다. 기본적으로 드래그 앤 드롭 기능을 지원하며, 라이브러리 기본 스타일 또한 동적인 애니메이션과 고급스러운 파일 첨부 상호작용이 매우 훌륭하다. (테마 역시 커스텀 수정이 가능하다) 특히 이미지 파일을 업로드할때, 기본적으로 이미지 썸네일 미리보기를 지원하며 멀티 업로드 기능 역시 지원한다. Amazon S3 멀티파트 업로드도 지원한다고 한다. 긴말 필요없이, 아래 코드 실행 예제를 보고 이미지 파일들을 업로드 해보자. See the Pen Untitled by barzz12 (@inpaSkyrim) on CodePen. See the Pen dropzone.js sample-2 (bootstrap)..
