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

jquery 로 만들어진 검색어 자동완성기능으로 간단하고 쉬운 사용자 정의 및 캐시를 지원합니다. 특정단어중 1개의 자음 혹은 단어만으로 찾고자하는 단어를 자동으로 완성시켜주는 자동완성기능입니다. 검색폼 항목에 "C" 란 자음하나를 입력할경우 아래와같이 조합된 여러 단어가 출력되게됩니다. 원하시는 조합된 단어를 클릭하면 해당 단어로 검색어를 입력할 수 있습니다. 자세한 사용방법 및 적용예제는 샘플사이트 url 을 참고하시기 바랍니다.

첨부된 파일의 압축을 풀어서 demo.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 마우스를 올려보면 해당 부분이 확대되는 효과가 나타납니다. 출처는 http://www.htmldrive.net/items/show/51/Apple-like-Retina-Effect-With-jQuery 입니다.

간단한 페이지를 스크롤효과로 시원하고 동적인 페이지로 보일수 있습니다. 스크롤을 내릴수록 색상이 변하며, 투명이미지에 색상이 채워집니다. 몇가지 아이콘으로 이런 멋진 페이지를 제작할 수 있습니다. 파일을 다운받으신후 이미지와 css, 스크립트를 참고하셔서 작업해보시기 바랍니다.

jquery를 이용해서 제작된 다양한 효과를 가진 슬라이드 입니다. 첨부파일을 다운로드 받아서 압축을 해제한후 examples/index.html examples/multiple.html examples/numbers.html examples/thumbs.html 위 파일들을 웹브라우저로 열어보면 슬라이드 효과를 확인할수 있습니다. 다양한 애니메이션 효과를 선택할수 있네요. 한페이지에 여러개의 슬라이드를 이용하는 예제입니다. 슬라이드의 네비게이션을 숫자를 쓰거나, 작은사진을 이용하는 예제입니다. 출처는 https://skitter-slider.net/ 입니다.

이미지를 이용한 기본적인 반응형 슬라이드를 구현할 수 있지만 vimeo 나 wistia 에 등록된 동영상도 슬라이드로 구현이 가능하며 여러가지 디자인을 제공합니다. flexslider.woothemes.com 에서 샘플을 확인할 수 있으며 다운로드도 가능합니다.

* ckeditor - oEmbed - 이 플러그인은 각종 동영상, 이미지, 음악 등 미디어를 삽입하는데 도움을 줍니다. - 미디어가 포함된 단축 URL을 입력하면 미디어가 자동으로 삽입 됩니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/oembed - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'oembed'; - 툴바에 추가된 아이콘을 눌러 미디어가 포함된 URL을 입력합니다. - [예] 를 누르면 아래처럼 미디어가 삽..

멀티플레이가 가능한 셀렉트박스로 ie8이상 크롬,파이어폭스,사파리,오페라 브라우저등 다양한 브라우저에서 지원되는 멀티셀렉트 박스입니다. 위와같이 다양한 옵션별 체크박스 효과를 보유하고 있습니다. 여러항목을 체크후 값을 저장하거나, 저장된 값을 이용하여 다양한 효과를 중복으로 체크할수 있습니다. 위와같은 항목별 css 소스를 확인할 수 있으며, 관련 css 및 소스를 다운로드받으실수 있습니다.

* License - MIT License * jQuery Responsive Tabs 설명 - javascript/jQuery 사용 - 데스크톱 / 태블릿 /모바일 에 css사용 - 탭이벤트에 대한 콜백이벤트 제공 - URL 해시로 탭을 열 수 있음 - 탭접기 기능 - 탭사용 중지 기능 - 크로스 브라우저 호환성(IE7+, Chrome, Firefox, Safari 및 Opera) * 사용방법 - jQuery 최소 1.7.0 버전 이상필요 - 첨부된 압축파일을 압축을 해제하여 js,css 폴더안에 jquery.responsiveTabs.js , jquery-2.1.0.min.js , responsive-tabs.css 파일을 호출 - HTML 마크업 사용 jquery 함수를 사용하여 선택한 요소에 대한..

HTML과 Javascript 로만 작동되는 기능이어서 첨부된 파일을 다운로드 받아서 압축을 해제하신후 index.html 을 웹브라우져로 실행해보면 확인이 됩니다. 비밀번호를 복잡하게 조합하면(영문,숫자,특수문자) 위 그림 처럼 미터기가 Very Strong 를 표시합니다. 대충 1234 나 qwer 같은 비밀번호를 입력해보면 Weak 로 미터기가 변경되는데, 프로그래스바가 움직이는 효과가 보기 좋네요. 비밀번호를 입력하다 보면 나름 규칙이 있네요. 영문만 입력하는 경우, 숫자와 섞는 경우 특수문자가 포함된 경우, 특수문자와, 영문,숫자의 배치순서 등등이 영향을 주나 봅니다. 회원가입 페이지에 달아두면 허술한 비밀번호를 사용하는 이용자들이 조금은 줄어들지 않을까 싶네요. ​ ​ ​