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

웹브라우저에서 PDF view 기능을 제공하는 PDF.js 입니다. https://github.com/mozilla/pdf.js 해당 프로그램은 서버에 모듈을 설치하여 이용을 하거나 소스 다운로드를 하여 이용 할 수 있습니다. https://github.com/mozilla/pdf.js 페이지에서 서버에서 설치룰 하는 방법을 확인이 가능 합니다. 굳이 이 과정을 거치지 않고 소스를 다운받아 원하시는 위치에 업로드 하여 이용하시는게 편합니다. 아래의 페이지에서 PDF불러오는 예제소스를 확인을 할 수 있습니다. https://mozilla.github.io/pdf.js/examples/index.html#interactive-examples 첨부된 파일을 다운로드 받아 서버에 압축을 풀어 업로드를 한뒤에, ..

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

사진,목업,비디오,사운드,아이콘,폰트등 무료로 제공되고 있는 사이트를 한번에 모아서 보여주는 사이트입니다. 북마크에 보관되어 있는 사이트들을 찾아서 들어가도 되지만 한번에 모아서 보여주니 더 편리한거 같네요 사이트 제작에 많은 도움이 되길 바랍니다^^ ​

다운로드 받은 파일의 압축을 해제한 후, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 축구 필드를 먼저 화면에 표시해주고, 각각의 포지션에 맞는 위치에 사람 그림이 표시가 되고, 해당 포지션에 배치된 선수가 누구인지를 서서히 표시해줍니다. 소스코드를 열어보면 1. jquery.js 와 soccerfield.js 를 로드를 먼저 합니다. 2. 선수의 이름과 포지션에 해당하는 데이터를 준비합니다. 3. 배경이 되는 축구 필드를 표시하는 스크립트를 실행하고, 해당 필드의 크기, 배경용 이미지 외 몇가지 옵션을 조절해서 아래와 같은 코드들을 작성하면 됩니다. 필드에 대한 옵션과, 선수에 대한 옵션이 나누어져 있네요. 모든 선수들이 필드에 표시된 이후에 작동 되는 콜백함수도 만들수..

HTML에서 둥근 범위 슬라이더를 만드는 jQuery 용 플러그인 입니다. 플러그인 "roundSlider"는 값 범위를 선택하기 위해 개발 되었습니다. 사용자 정의 가능한 원형 / 방사형 범위 슬라이더입니다. 터치, 마우스 휠 스크롤 및 키보드 화살표 키를 지원합니다. 또한 슬라이더는 순전히 CSS와 JavaScript로 빌드됩니다. 따라서 그래픽에 이미지를 사용하지 않습니다. 라이센스는 MIT 라이센스 입니다. 사용법은 아래와 같습니다. # 라이브러리를 호출 합니다. # 컨테이너를 생성 합니다. # 스크립트를 실행 합니다. $("#type").roundSlider();

jQuery 를 이용하여 물파장 이펙트를 주는 플러그인 입니다. 사용방법은 매우 심플 합니다. # 라이브러리 호출 합니다. # 컨테이너를 만듭니다. # 스크립트를 실행 합니다. $(".full-landing-image").ripples({ resolution: 200, perturbance: .004, }); 한가지 아쉬운점은 데모 사이트는 멋지게 작동하지만 샘플 코드는 너무 심플한것 같습니다. 라이센스는 별도 안내가 안되어 있지만 코드힘에서 확인했을 때 이미지에 MIT 라이센스로 명시가 되어 있네요.

탭을 클릭하면 해당 탭의 컨텐츠가 슬라이딩 되면서 변경됩니다. css와 js 로 구현되어 있습니다. 해당 사이트에서 소스코드 확인 및 다운로드가 가능합니다. 첨부파일에서 소스를 다운로드 받으실 수 있습니다.

메뉴버튼을 클릭하면 사이드메뉴가 펼쳐집니다.(1차메뉴) 1차메뉴를 클릭하면 2차메뉴가 1차메뉴 위로 펼쳐집니다. 이전메뉴를 볼려면 메뉴버튼을 클릭하면 이전메뉴로 돌아갑니다. 해당 사이트에서 소스확인 및 소스파일을 다운로드 받을 수 있습니다. 또는 첨부파일을 통해 소스파일을 다운로드 받을 수 있습니다.

간단하지만, 유용한 input 버튼 css 입니다. 기본 시스템 input 버튼이 아닌 디자인을 하기 위한 기본적인 소스이며, 간단한 css와 javascript로 구현이 가능합니다. 별도의 프로그램 작업없이도 디자이너가 사용이 가능합니다.

사이드에서 1차 메뉴 마우스 오버시 2차 메뉴가 나오는 jQuery 높이는 1차 메뉴 영역 높이에 맞춰서 나옵니다. CSS내 2차메뉴 좌우 위치값과 스크립트내 좌우 위치값을 변경하시면 오른쪽에서 나오는 메뉴로도 변경이 가능하며, 나오는 애니메니션 속도 설정도 가능합니다. 가장 기본적이지만, 활용도가 높은 소스입니다.