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

jbEmoji는 웹 프로젝트에 이모티콘을 쉽게 추가할 수 있게 해주는 아주 간단한 jQuery 이모티콘 선택기 플러그인입니다. 간단한 초기화만으로 사용자는 편리한 이모티콘 상자에서 바로 다양한 이모티콘을 쉽게 검색하고 선택할 수 있습니다. 다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 이모지를 클릭을 해보면, 어떤 이모지를 선택했는지를 표시해줍니다. 사용방법은 아래와 같습니다.

상단 영역의 밑에 컨텐츠가 블러처리 됩니다. 스크립트 소스입니다. css 소스입니다. 해당 사이트 또는 첨부파일을 다운로드 받으면 전체 소스를 확인할 수 있습니다.

- 라이센스 MIT - 사용 방법 1. 페이지의 헤드 섹션에 intlTelInput.css 파일을 호출합니다. 2. 전화번호 입력 필드를 추가합니다. 3. 페이지 하단에 jQuery 라이브러리와 intlTelInput.min.js 파일을 호출합니다. 4. 플러그인을 호출합니다. 5. 기본 옵션과 메소드, 이벤트 등은 플러그인 홈페이지를 참고하세요. - 작동 화면

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 jQuery.ddUrl.js 플러그인을 호출합니다. 2. 아래와 같은 메소드를 이용하여 원하는 값을 파싱할 수 있습니다. - URL의 모든 모든 요소들 - 전체 URL - 프로토콜 파싱 - 호스트(도메인)명 - 포트 - 경로 - 쿼리 파라미터 이 외에 추가적인 메소드들은 플러그인 홈페이지를 참고하세요.

GC-Calendar는 월별로 애니메이션과 매력적인 이벤트 캘린더를 만드는 데 도움이 되는 가벼운 jQuery 플러그인입니다. 완벽하게 반응하며 CSS3 애니메이션을 사용하여 월 간에 전환할 때 부드러운 슬라이드 전환을 제공합니다. 다운로드 받은 파일의 압축을 해제한 뒤, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화살표를 이용해서 화면에 표시되는 월 이 변경될 때, 애니메이션을 이용해서 달력 전환이 생깁니다. 사용법은 아래와 같습니다.

비가 내리는 효과를 만들 수 있습니다. 코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. [HTML 소스] [CSS 소스] html{height:100%;} body { background:#0D343A; background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(#000000) ); background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(0,0,0,1) 100%); overflow:hidden;} .drop { background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(..

YT Player는 YouTube 동영상을 위한 빠르고 최소한의 동영상 플레이어 웹 앱입니다. JavaScript(jQuery)로 작성되었으며 사용자가 모달 팝업 에서 YouTube 비디오를 재생할 수 있습니다 . 입력 필드에 Youtube 비디오 URL을 입력한 다음 재생 버튼을 클릭하세요. 또한 반응형이므로 데스크톱 컴퓨터에서 휴대폰, 태블릿에 이르기까지 모든 장치에 맞게 크기가 자동으로 조정됩니다. 다운로드 받은 파일의 압축을 해제한뒤에, index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 유투브에서 동영상을 공유하기 위한 URL을 복사해서, 위 입력박스에 입력한뒤에 play 버튼을 눌러주면 확인이 가능합니다. 반응형이어서 창 크기에 따라서 동영상이 재생되는 모달창의 크기가 변경이 ..

모바일에서 읽을수 있는 테이블을 만드는 jquery 플러그인 입니다. 다운로드 받은 파일의 압축을 해제한뒤, demo/jquery.html, demo/vanilla-js.html 파일들을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같이 표시되던 테이블이 창의 가로크기를 모바일기기의 가로크기 만큼 줄여보면 위 그림 처럼 모바일기기의 화면에서도 데이터를 읽을수 있는 테이블로 변경이 됩니다. 사용방법은 아래와 같습니다. 데모페이지를 살펴보면, 다양한 예제의 테이블들을 볼수 있으며 각각의 예제들을 이용하기 위한 샘플 코드를 확인할 수 있습니다.

css를 이용아여 문자를 회전할 수는 있지만 각 문자를 전부 수동으로 배열하는 것은 상당히 복잡합니다. 해당 js는 이러한 작업을 자동으로 수행하는 jQuery 플러그인 입니다. 반경과 방향을 제어할 수 있습니다. 반경이 작아지면 원에 가까워 집니다. 글자를 회전하지 않게 할 수 있습니다. 해당 사이트 또는 첨부파일 다운로드를 통해 소스를 다운로드 받을수 있습니다.

상하 슬라이드 로링 되는 jquery 자바스크립트 소스입니다. jquery 소스 링크와 간단한 스크립트 소스를 통해서 상하 롤링 슬라이드 기능을 이용할 수 있습니다. 스크립트네 높이값 조절을 통해 이동하는 높이값 설정도 쉽네요. 여러모로 활용도가 높은 소스입니다.