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

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

포토샵의 드랍쉐도우 효과를 css box-shadow로 변환해주는 툴입니다 ~~^^ 좌측에서 포토샵속성값을 입력한뒤 입력한 값을 우측에서 추가 수정을 할 수 있습니다. 컨버트 후 css로 업데이트를 하면 아래에 코드를 확인하실 수 있습니다.

준 HTML 태그인 를 키보드로 제어가 가능하고, 스킨으로 제작가능한 드롭 다운 목록으로 쉽게 변경이 가능한 JQUERY 플러그인 입니다. 다운로드 받은 압축파일의 해제를 한후에 dist/index.html 파일을 웹브라우저에서 열어서 보면 확인이 가능합니다. 태그로 생성된 기본이 선택상자를 와 , 태그로 변환이 되어서 드롭다운 메뉴를 구성하는 기본적인 샘플을 몇가지 볼수 있습니다. CSS를 지정하는 식으로, 다양한 모양으로 스킨화를 하는것도 가능하다고 설명이 되어 있네요. 샘플용 HTML 파일의 소스코드를 열어서 보면 이미 작성되어 있던 HTML태그를 많이 변경하지 않고도 적용이 가능해 보이네요. https://www.jqueryscript.net/form/Easy-jQuery-Based-Drop-Do..

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

* Jquery Drop down Menu 소개 - 크로스 브라우저 호환성 - CSS 메뉴로 액세스 할 수 있습니다. - 최적화 된 검색 엔진 - jQuery 드롭 다운 메뉴의 정렬되지 않은 목록 (LI 및 UL HTML 태그) 구조 지우기 - 설치 및 업데이트가 쉽습니다. - 환상적인 애니메이션 및 전환 효과 - 여러 가지 미리 색칠 된 색 구성표 - CSS로 완전히 사용자 정의 할 수있는 스타일링 * 설치방법 및 사용방법 - jquery 버전은 최소 1.3.2 버전 이상이면 되며 첨부된 파일을 다운로드 하여 원하시는 웹루트 디렉터리에 업로드하고 압축을 해제합니다 작업해야될 html 문서안에 jquery.js 와 menu.js 를 호출합니다 샘플소스의 태그 class들은 menu.css 에 선언되어있으..

복잡한 자바스크립트 소스 대신 간단하게 bootstrap을 활용한 드롭다운 메뉴 소스입니다. 기본 적인 1차 메뉴 구성 및 1차 메뉴 마우스 오버 효과는 물론이고 클래스 지정을 통해 간단하게 2차 드롭다운 메뉴 구성도 가능합니다. 다른 클래스(.nav-stacked) 지정으로 상하 메뉴 구성도 손쉽게 가능합니다.

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