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

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 sp.stickyHeader.js 파일, sp.stickyHeader.css 파일을 링크합니다. 2. 다음과 같이 헤더 요소를 만듭니다. 3. 헤더 요소에 플러그인을 연결합니다. 4. 헤더 요소를 고정하기 위해 페이지가 얼마나 아래오 스크롤되는지 결정합니다. (기본값:300) 5. 고정된 헤더 요소에 추가 CSS 클래스를 추가합니다. 6. 모바일 장치에서 고정 헤더를 비활성화할지 여부를 결정합니다. (기본값:true) - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 WaltzerJS 파일을 링크합니다. 2. 슬라이드 시킬 내용들을 DIV 태그로 감싸서 추가합니다. 3. CSS 파일에 클래스를 추가하고 필요에 맞게 변경할 수 있습니다. 예) 4. WaltzerJS 플러그인을 호출합니다. 5. 옵션을 조절하거나 및 콜백 함수를 사용할 수 있습니다. 6. API 메소드 7. 이벤트 핸들러 - 작동 예제

jQuery 를 이용하여 텍스트에 애니메이션 형태의 강조 효과를 주는 플러그인 입니다. 사용방법은 매우 심플 합니다. 1. 라이브러리 호출 합니다. 2. 컨텐츠 구성 Hello, Dolly Well, hello, Dolly Hello, Dolly marker-animation class 로 강조효과를 주고 싶은 텍스트를 감싸 주세요. 3. 플러그인 실행 $('.marker-animation').markerAnimation(); npm 버젼의 경우 여러가지 옵션을 제공하지만 현재 등록된 첨부파일은 npm 버젼과는 다른 버젼임을 참고 해주세요. ( Color, thickness, duration, delay, font_weight, repeat, stripe ) npm 버젼 사용하시길 희망하시는 경우 아래의..

입력폼을 이용해서 데이터를 입력받을수 있으며 추가 데이터를 입력받기 위해서 동적으로 테이블(입력폼)을 생성하고, 드래그앤드랍으로 순서를 조절할 수 있는 간단한 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한 후, index.html 파일을 웹브라우저로 열어 보면 확인이 가능합니다. 우측의 +,- 와 끌어서 이동하는 아이콘을 이용해서 제어가 가능합니다. 사용하기 위한 방법은 1. jquery 와 필요한 라이브러리를 load 합니다. 2. 정렬순서를 조절하기 위해서 jquery ui 를 load 합니다. 3. 기본적인 HTML 태그의 구조는 아래와 같습니다. 4. 동적으로 테이블을 제어하기 위한 JS 코드를 추가합니다. 5. 테이블을 제어하기 위해서 줄수 있는 옵션들은 아래와 같습니다. 6...

SSG(Show Story Gallery)는 jQuery 와 CSS3로 만들었습니다. 여러개의 이미지를 갤러리 형태로 보여주고 클릭하면 스토리 갤러리 형태로 보여주는 플로그인 입니다. 사용법 안내 입니다. 1.CSS 와 jQuery 를 호출합니다. 2. 플로그인을 호출 합니다. 3. 컨텐츠를 작성 합니다. Also image caption don't include me into SSG 컨텐츠 내용 중 BigImage1.jpg 와 같은 이미지 파일명을 원하시는 이미지 파일로 교체하시면 됩니다. 첨부된 압축 파일을 해제하시면 index.html 파일이 존재하며 index.html 파일을 브라우저로 호출하시면 보다 깔끔한 상태의 데모를 확인할 수 있습니다. ^^ 라이센스는 GNU GPL-3.0 license ..

웹에서 멋진 프리젠테이션을 무료로 제작할 수 있는 기능을 제공하는 Reveal JS 입니다. https://revealjs.com/ 페이지에 접속하여 사용법을 확인 할 수 있습니다. 소스의 설치는 기본 설치와 전체 설치 두가지로 분리가 되어 있는데, 일부 기능을 이용하기 위해서는 전체 설치 방식으로 서버내에 소스가 설치 되어야 합니다. https://revealjs.com/installation/ 해당 Reveal JS 에서는 프리젠테이션을 위한 다양한 기능을 제공하고 있습니다. https://revealjs.com/ 페이지에서 확인을 할 수 있습니다.

* Intro.js 소개 - 사이트의 단계별,섹션별로 가이드가 가능하며 멘트나 이미지를 부각 시켜 수 있는 플러그인 * 라이센스 - GNU AGPLv3 * 사용방법 기본제공되는 css 를 상단에 선언합니다 아래와 같이 단계별 가이드를 하여 내용을 부각시키기 위한 버튼을 만들어 줍니다 스크립트로 시작하여 data-step 옵션과 같이 몇단계에서 보여줄지 지정할 수 있습니다 마지막으로 intro.js 의 호출 부분으로 구성은 마무리 됩니다 위와 같이 단계별 tooltip 기능을 보여줌으로써 사이트의 차트 플로우나 내용이 복잡한 부분에 있어서 쉽게 설명해 줄 수 있을것으로 생각됩니다

https://hanlee.io/hwp.js/demo/ 위의 데모 페이지에서 바로 체험이 가능합니다. hwp 한글 문서를 웹브라우저에서 바로 볼수 있습니다. https://chrome.google.com/webstore/detail/hwpjs/hgalnnpknkjdccmcljadkckcdibiglei 크롬 확장 프로그램으로도 지원합니다. 현재 버전은 0.0.2 입니다. 지속적으로 개발 되었으면 합니다. 현재 라이센스는 아파치 2.0 라이센스 입니다.

각종 평가 점수를 별모양의 아이콘을 선택해서 입력받을수 있는 jQuery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제한후 index.html 파일을 크롬 웹브라우저로 열어 보면 별점선택을 하는 화면의 확인이 가능합니다. 별모양의 아이콘을 화면에 표시해주고, 클릭을 하면 점수를 화면에 표시를 해주네요. 별모양 아이콘 뿐만 아니라, 아이콘을 커스텀해서 다른 아이콘을 이용하는 것도 가능합니다. 사용하는 방법도 복잡해보이지는 않네요 위 4가지가 기본이며, 클릭 이벤트를 걸거나, 별의 개수를 10개로 늘려서 0~10점 사이의 점수를 받는다거나, 별 반개만 선택해서 .5 점을 이용하거나, 별 아이콘의 색상을 조절을 하거나, 별 아이콘 대신 다른 아이콘으로 커스텀하는 예제는 위 소스코드와 같습니다. 그 외에도..

모바일용 이미지 슬라이드 Custom scroll slider로 슬라이더바를 이용한 이동, 터치를 이용한 이동이 가능합니다. html, css, js를 이용하여 구성 및 이용이 가능하며, js내 옵션 변경을 통해서 간격 너비, 속도 제어등이 가능합니다. 또한 html 소스를 개수도 자유롭게 늘릴 수 있습니다.