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

터치 및 마우스 호버효과로 만드는 가벼운 무료 오픈 소스 JavaScript 라이브러리 Atropos JavaScript, React 및 Vue.js에서 사용 가능하며 경량화된 소스입니다. 여러가지 변수를 통해 사용자 정의 설정 사용이 가능합니다. 회전 반경, 그림자 효과 관련 등 다양한 사용자 정의 설정이 가능합니다.

기본 선택상자(셀렉트박스) 를 조금 더 이용하기 편한 UI로 변경해주는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한뒤, demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같은 기본 선택상자를 오른쪽의 그림 처럼 선택가능한 옵션들을 펼쳐서 화면에 보여주고, 이미 선택한 옵션을 표시해주고, 선택 가능한 옵션들 에서 검색어가 포함된 옵션을 검색할수 있습니다. 여러개의 옵션을 선택할 수 있는 선택상자에서도 사용할 수 있습니다. 사용법은 아래와 같습니다.

JavaScript 를 이용하여 Top 버튼을 클릭하면 부드럽게 Top 으로 스크롤 되는 소스 입니다. 적용방법은 아래와 같습니다. 1. CSS 를 추가 합니다. 2. JavaScript 를 호출 합니다. 3. 세부적인 설정 항목은 아래와 같습니다. 설정 항목에서 normal, Iinear 사용해 봤을 때 스크롤이 길지 않다면 Iinear 조금 더 보기 편하고 페이지가 많이 길 경우 normal 로 설정하는게 좋은 듯 합니다.

JavaScript 로 테이블을 생성합니다. 그리고 테이블의 해더를 클릭하면 정렬(소팅) 할 수 있는 소스코드 입니다. 만드는 방법은 아래와 같습니다. 1. Table 을 생성하고 고유한 아이디를 지정하세요. 단, Table 요소에서 반드시 샘플과 같은 양식으로 맞춰야 하고 th, tbody 는 필수 입니다. 2. th 요소에 CSS 스타일을 정의 합니다. 3. js/script.js 를 호출 합니다. 제일 마지막에 호출해야 합니다. Table 에 출력되는 데이터 편집은 js/script.js 에서 할 수 있습니다. 형식에 맞춰서 편집 혹은 추가하시면 됩니다.

- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 creditCardNumberCheck.js 파일을 호출합니다. 2. 카드 번호 입력 폼을 생성합니다. 3. 입력된 카드 번호 입력 폼을 선택자로 하여 플러그인을 호출하면 true 또는 false 값을 얻을 수 있습니다. - 작동 예제

- 라이센스 MIT - 키보드 부가 기능 - 왼쪽/오른쪽 화살표 : 같은 영역의 입력 필드 사이에서 포커스를 이동합니다. - BackSpace : 모든 입력 필드에서 입력한 내용을 제거합니다. - Home/End : 첫번째/마지막 입력 필드도 포커스를 이동합니다. - 사용 방법 1. 카드 번호 입력폼을 생성합니다. 2. jQuery 라이브러리와 join_inputs 플러그인 파일을 호출합니다. 3. join_inputs 플러그인을 호출합니다. - 작동 예제

Spring Boot는 Java를 기반으로 한 웹 어플리케이션 프레임워크입니다. 기존의 Spring 프레임워크가 초기 환경 설정시 많은 시간이 소요되는 어려움이 있었다면, Spring Boot는 위 단점을 해결하고자 등장한 프레임워크입니다. Spring Boot의 개요와 프로젝트 시작 방법은 홈페이지에서 확인 가능합니다. https://spring.io/projects/spring-boot 빠른 시작 가이드를 통해 Spring Boot 프로젝트 세팅을 배울 수 있습니다. https://spring.io/quickstart 좀 더 자세한 가이드가 필요하시다면 아래 링크를 참고하여 세팅이 가능합니다. https://spring.io/guides/gs/spring-boot/ 해당 사이트에서 Srping boo..

선택하고자 하는 여러개의 옵션을 셀렉트박스를 이용해서 선택할 수 있는 jquery 플러그인입니다. 다운로드 받은 파일의 압축을 해제한 뒤 example/index.html 파일을 웹브라우저로 열어보면 예제를 확인할 수 있습니다. 주요 기능은 아래와 같습니다. - 선택할 수 있는 최대 옵션 수를 지정할 수 있습니다. - 각 옵션에 대해 이미지를 할당할 수 있습니다. - 검색 상자를 기준으로 옵션을 필터링할 수 있습니다. - 선택한 옵션을 태그/토큰으로 표시합니다. 예제 파일을 웹브라우저로 열어보면, 아래의 그림과 같은 화면이 표시가 됩니다. Select 라는 부분을 클릭해보면, 선택 가능한 옵션들이 화면에 표시가 됩니다. 옵션의 제목들 앞에, 옵션에 해당하는 이미지를 표시하도록 할 수 있습니다. 몇몇개의 ..

Epub.js는 브라우저를 통해 epub 문서를 랜더링 할 수 있는 javascript 라이브러리 입니다. EPUB 형식의 파일로 현재 많은 책들이 저장되어 널리 사용되고 있습니다. EPUB에 대한 자세한 설명은 아래 페이지를 참고 하시면 도움이 되시겠습니다. https://idpf.org/epub/30/spec/epub30-overview.html https://github.com/futurepress/epub.js 페이지를 통해 사용법 확인 및 소스 다운로드가 가능 하며, 다양한 데모 확인도 가능 합니다.

Particle Explosion on Click jQuery 를 이용하여 클릭하면 폭발하는 이팩트 효과를 주는 라이브러리 입니다. 사용방법 1. 폭발효과는 어느 곳에나 적용할 수 있습니다. 2. CSS를 사용하여 폭발효과의 CSS를 정의할 수 있습니다. 3. 라이브러리를 호출합니다. 4. 이벤트를 등록하면 끝 입니다.