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

* jquery fancyTable fancyTable은 html 테이블을 검색하고 정렬 할 수 있도록하는 jQuery 플러그인입니다. * License MIT License * 이용방법 첨부된 압축파일을 해제하여 원하는 웹경로에 업로드 합니다 css 를 아래와 같이 호출합니다 테이블 html 태그를 구성합니다 (jquery 를 통해 tbody 태그에 테이블 내용이 삽입됩니다) 구성에 필요한 js 파일 및 코드를 삽입합니다 위와 같이 적용된 jquery 를 통해 아래와 같이 테이블 내용이 삽입되고 정렬됨을 확인할 수 있습니다 첨부된 압축파일에도 샘플 파일이 있으니 참고하시면 도움이 되실겁니다 ​ ​

피그마는 2016년 출시 이후 강력한 디자인 플랫폼으로서 자리를 잡아 나가고 있습니다. 브라우저 기반의 프로그램으로서 업데이트의 어려움이나, 화면을 동기화하거나, 다른 팀원들과의 작업 상의 문제를 손쉽게 해결할 수 있는 특징을 지니고 있는 프로그램입니다. 특히 실시간 협업 기능은 피그마가 가장 자랑하는 기능 중 하나로서 여러 플랫폼에서 사용이 가능함과 동시에 러닝커브가 굉장히 낮은 것을 특징으로 합니다 자세한 내용은 데모링크를 통해서 무료사이트 및 내용을 확인하실 수 있습니다. ^^

다양한 옵션으로 아바타를 만들수 있습니다. 일일이 선택하기 어려우면 랜덤으로 생성도 가능합니다. 생성된 아바타는 위처럼 이미지 태그 혹은 SVG 파일로 다운로드 가능합니다. 아바타 이미지가 필요할때 유용한 사이트 입니다. ​ ​ ​

추억의 mp3 플레이어 프로그램 입니다. 한땐 참 많이도 사용했던 프로그램이였고, 여러 오픈 라디오 방송도 참 많이 들었던 추억의 프로그램 입니다. 윈앰프의 기능이 웹에 그대로 구현 되어있습니다. 사이트에 방문하셔서 한번 체험해 보시는게 좋을것 같습니다. 현재 윈앰프는 공식적으로는 윈도우 10 에서는 사용 불가능 합니다. http://www.mywinamp.com/winamp-for-windows-10-download/ 팬들이 만든 비공식으로 윈도우 10 에서 사용할수 있으니 한번 사용해 보시기 바랍니다.

다운로드 받은 파일의 압축을 해제한 후, index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 여러줄로 구성된 텍스트를 일부만 화면에 표시해주고, 표시되는 끝 부분에 read more 버튼을 표시해줍니다. 더 보기 버튼을 클릭하면, 나머지 텍스트를 화면에 스르륵 표시를 해주는 jquery 플러그인 입니다. 사용법은 아래와 같습니다. 1. jquery 와 더보기 플러그인을 로드합니다. 2. 텍스트가 출력되어야 할 블록을 연결하고, 몇줄을 자르고 표시할지를 지정합니다. 3. 더보기 버튼을 클릭하면 화면에 나머지 텍스트를 표시하는 효과를 주려면 텍스트를 출력하는 블록에 data-controller 이라는 속성을 추가하고, 버튼과 연결하면 됩니다. 4. 더보기 버튼을 조절하거나, 더보기 할 텍..

웹브라우저에서 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();