웹솔루션개발 22년 노하우! 해피CGI의 모든것

자바스크립트와 css를 이용하여 제작된 풀스크린 슬라이더입니다. 페이저와 마우스 드래그를 통해 슬라이드를 넘길수 있습니다. HTML을 통해 슬라이드 갯수를 조정할 수 있고. CSS를통해 배경이미지, 오버레이된 빗금 도형의 색깔 등을 변경 가능합니다. Javascript로는 애니메이션과 관련된 속성들을 변경할수 있습니다. 풀스크린 홈페이지를 제작시 유용하게 쓰일만한 슬라이더 입니다. 자바스크립트의 autoSlideDelay 부분 숫자를 조정해 각각의 슬라이드가 보여지는 시간을 설정할 수 있습니다. 6000은 6초입니다.

파일첨부를 웹페이지의 특정영역에 파일을 드롭하여 업로드를 하는 기능을 제공하는 Dropzone.js 입니다. https://www.dropzonejs.com/ 웹페이지에서 설치방법 및 이용방법 확인이 가능 합니다. 다양한 이벤트 핸들러도 존재 합니다.

css를 이용하여 텍스트를 드래그 했을경우 텍스트 및 배경색상을 변경할 수 있는 소스입니다. ::selection을 이용하시면 되며 .aa::selection 과 같은형태로 이용하시면 됩니다. 완성된 예제는 첨부파일을 다운받아서 이용하시면 되며 사용가능한 브라우저는 아래와 같습니다. https://caniuse.com/#search=selection

이미지 파일을 드래그 해서 휴지통 근처에 드랍하면, 파일을 삭제하는 프로그램의 예제입니다. 다운로드 받은 파일의 압축을 해제해서 PHP가 구동되는 웹서버에 업로드를 합니다. delete.php 와 index.php 의 소스코드를 열어서 보면 Mysql DB접속 정보를 입력해줘야 합니다. 이미지파일의 경로를 Mysql DB에 저장할 테이블을 생성해주어야 하는데 SQL/drop_delete.sql 파일을 Mysql 서버에 임포트 해주면 됩니다. import 하고 나면 drop_delete 라는 데이터베이스와 간단한 구조의 images 라는 테이블이 하나 생성됩니다. 웹브라우져로 페이지에 접속해보면 아래 그림과 같은 화면이 열리게 됩니다. 이미지를 마우스로 클릭해서 끌어다가 휴지통에 넣으면 끌었던 이미지 파일..

브라우저를 사용할때 마우스로 드래그하면 기본적으로 나오는 파란색을 확인하실 수 있는데요. 이 기본 푸른색상을 CSS로 변경이 능합니다. selection 을 입력하여 원하는 색상으로 간편하게 변경하실 수 있습니다. ::selection { color:red; background:yellow; }

드래그 앤 드랍을 사용하기 쉽도록 구성되어 있네요. 압축 파일을 해제 하신 후 해당 폴더로 가시면 index.html 파일이 있습니다. index.html 파일을 열어보시면 구조는 매우 심플하며 디자이너도 쉽게 가져와서 사용할 수 있는 수준으로 되어 있습니다. index.html 파일에서 수정시 주의하셔야 할 사항은 div id 입니다. 아래의 이미지를 참고해 주세요. 사용해 보니 무겁지도 않으며 DIV 내용에 다른 제약 사항도 없어서 괜찮네요 ^^