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

jQuery 를 이용한 메뉴 플러그인 입니다. 압축된 js 파일은 9KB로 매우 가볍습니다. IE11 에서도 구동 됩니다. 왼쪽 메뉴 또는 오른쪽 메뉴 형태로 설정하여 사용할 수 있습니다. HTML5를 사용 합니다. BEM 표기법을 사용합니다. 라이센스는 MIT License (MIT) 입니다. 아래는 실행화면 입니다. 사용법 안내 입니다. 1. 라이브러리를 호출 합니다. 2. 컨텐츠 및 메뉴를 선언 합니다. Menu Shop Products Collections Premium Common Exclusive First Secound Other Accesories Small Medium Large Cards Sets Example 1 Example 2 Example 3 Example 4 Example 5 ..

jQuery 를 이용하여 라이트 박스를 만들 수 있습니다. 사용자 정의가 가능합니다. 이미지, 비디오(YouTube, Vimeo, Wistia, Brightcove), Soundcloud 트랙, IFRAME 및 AJAX 콘텐츠를 지원하도록 제작되었습니다. 반응형 으로 제작 되었습니다. MIT 라이센스 입니다. 사용법은 간단 합니다. 1. 라이브러리 호출 2. 컨텐츠 선언 빨간색은 라이트박스에 보여질 썸네일 입니다. 파란색은 리스트에 보여질 썸네일 입니다. 3. 실행 var foo = $('#gallery'); foo.poptrox(); 실행화면 입니다.

날짜/시간 picker 입니다. 상황에 따라 날짜와 시간 모두 설정하거나 개별로 사용이 가능합니다. 해당 사이트 또는 아래 사이트에서 소스에 대한 설명을 확인할 수 있습니다. https://github.com/katemihalikova/ion-datetime-picker

구글 드라이브의 OCR 기능으로 이미지에 있는 텍스트를 추출할 수 있습니다. 1. 구글 드라이브에 이미지를 업로드 합니다. 2. 텍스트를 추출할 이미지에 마우스 우클릭 후 연결 앱에서 Google 문서 선택 3. 새로운 창에서 추출된 텍스트를 확인할 수 있습니다.

드래그앤드롭, 리사이즈, 멀티터치 등의 기능을 제공하는 interactjs 입니다. https://interactjs.io/ 위 홈페이지에 접속시 하단에서 샘플 및 소스를 확인이 가능 합니다. 최신버전의 소스는 https://github.com/taye/interact.js 페이지를 통해 다운로드 할 수 있습니다. interact.js 소스 이용방법은 https://interactjs.io/docs/ 페이지에서 열람 하시고, 필요하신곳에 적용하여 이용 하시면 되겠습니다.

간단하게 웹페이지 내의 소스코드 하이라이팅을 쉽게 할 수 있는 highlightjs 입니다. highlightjs는 최대 196가지의 언어를 지원합니다. 참고로 이곳에 첨부된 소스 파일은 34종의 언어만 포함된 버전 입니다. 전체 언어에 대한 소스를 다운로드 받으시고자 하신다면 아래 페이지로 이동하여 원하는 언어를 클릭하여 하단의 다운로드 버튼을 통해 다운로드가 가능 합니다. https://highlightjs.org/download/ 혹은 CDN 서비스를 이용 할 수도 있습니다. 사용방법은 https://highlightjs.org/usage/ 페이지에서 확인 하실수가 있으며, 기본적인 사용방법은 간단 합니다. Javascript 와 CSS를 선언하고 하이라이팅이 필요한곳에 태그를 이용 하면 됩니다. ..

체크박스 버튼을 없이 카드를 선택할 수 있는 Checkbox card를 소개합니다. 선택되지 않은 상태에서 위 이미지처럼 이미지 색상이 흑백으로 출력됩니다. 카드를 선택하면 check 아이콘 및 라인이 나타나 선택된 것을 보여주며, 원래 이미지 색상이 출력됩니다. 체크박스, 라디오 버튼의 폼을 사용할때 참고하기 좋은 디자인 인거 같습니다. ^^

위 이미지 처럼 되어 있던 이미지들이 화면을 스크롤 하게 되면 위 이미지처럼 기울어져 화면이 울렁거리는 듯한 효과를 줍니다. 기본적으로 이미지가 출력되는 부분에 transform: skewY(0deg)로 설정되어 있으며, script 소스로 스크롤기 기울기 값을 각기 달리 부여해 이와 같은 효과가 만들어지고 있습니다. 해당 script 소스는 홈페이지 참고 해보실 수 있습니다. ^^

키보드 타이핑을 하는 속도와, 정확도를 테스트할 수 있는 프로그램 입니다. 다운로드 받은 파일의 압축을 해제한 뒤, index.html 파일을 웹브라우저로 열어보면 간단하게 확인이 가능합니다. 웹브라우저로 열어서 보면 아래 그림과 같은 화면이 표시가 됩니다. 입력박스를 이용해서, 상단에 표시되는 영어 단어들을 타이핑하면 됩니다. 1분이란 시간 동안 몇개의 단어를 타이핑 할수 있는지와, 제대로 타이핑을 했는지와, 정확도가 어느 정도 되는지를 테스트를 해볼 수 있습니다. 틀린 단어는 녹색으로 표시가 안되고, 오타율이 올라가네요. 혹시나 한글도 되려나 싶어서 words.js 소스코드내에 타이핑 테스트를 할 영어 단어들이 저장된 걸 보고 한글로 바꿔봤지만, 예상했던데로, 한글로는 테스트가 되지는 않네요.

순수 CSS로만 만든 모달 레이어 팝업 소스입니다. 별도의 javascript 없이 순수 CSS로 이루어진 모달 레이어팝업으로 가볍게 구동됩니다.