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

드래그 앤 드랍, 키보드로 탐색 가능하며,  트리 생성, 수정, 삭제가 가능하며, 체크박스등 다양한 기능이 지원 되는 js 입니다.https://www.jstree.com/사이트 하단에 보시면 순서대로 사용방법이 아주 친절하게 안내 되어있습니다.그 외에도 탭으로 JSON 데이터를 활용한 방법등도 안내 되어있으니, 사이트 방문하여 순서대로 진행해 보시면트리구조의 메뉴 구성을 쉽게 하실 수 있으실 겁니다.

서서히 색상이 변하는 백그라운드 애니메이션입니다.간단한 소스로 구현이 가능합니다.  HTML 구조 CSS 소스*, *::before, *::after {  box-sizing: border-box;} html, body {  height: 100%;} body {  display: grid;  align-items: center;  justify-items: center;  margin: 0;  background-color: #000;} div {  width: 300px;  height: 300px;  border-radius: 50%;  box-shadow:    0 0 20px #fff,    -20px 0 80px #f0f,    20px 0 80px #0ff,    inset 0 0 50px ..

심플하게 구동가능한 TOAST UI - Date Picker 입니다. 다양한 모양의 달력을 이용이 가능 합니다.https://ui.toast.com/tui-date-picker 제공되는 다양한 기능(스킨)은 아래 페이지를 통해 확인을 할 수 있습니다.https://nhn.github.io/tui.date-picker/latest/tutorial-example01-basic 최신 소스는 아래 페이지를 통해 다운로드가 가능합니다.https://github.com/nhn/tui.date-picker

마우스 우측 버튼을 클릭해서 메뉴를 오픈 할 수 있는 TOAST UI - Context Menu 입니다.홈페이지는 https://ui.toast.com/tui-context-menu 으로 접속시 확인이 가능 합니다.샘플 소스를 보면 간단하게 소스를 작성하여 이용을 가능합니다.https://nhn.github.io/tui.context-menu/latest/tutorial-example01-basic 자세한 API 사용방법은 아래 링크를 참고 바랍니다.https://nhn.github.io/tui.context-menu/latest/ContextMenu 최신 소스의 다운로드는 아래 페이지를 통해 할 수 있습니다.https://github.com/nhn/tui.context-menu

tabview는 iphone, ipad, android 등과 같은 모바일 장치용 콘텐츠의 탐색 가능한 탭 보기를 만들 수 있는 jQuery 및 jQuery 모바일 기반 구성 요소입니다.다운로드 받은 파일의 압축을 해제한 뒤example/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다.사용방법은 아래와 같습니다.모바일 기기에서,위 그림과 같은 여러탭으로 컨텐츠를 구성하려고 할때 사용하면 좋겠네요.

웹을 통해 폼을 선택하고, 자동으로 태그를 생성하는 사이트입니다.자동완성 폼, 버튼, 달력, 숫자 폼, 선택박스, 라이오버튼 등 원하는 폼을 선택하고html, XML 등 선택하면, 태그 소스를 자동으로 만들어 줍니다.

원하는 색상을 다수 선택하고, 그라데이션 각도까지 선택하여 그라데이션 색조합을손쉽게 해주는 사이트 grabient 입니다.색상 및 각도 조절 후 [copy css] 를 클릭하면 css 소스로 제공합니다.복사해서 바로 사용이 가능하니 편하네요.^^

jqClock.js는 현재 로컬 또는 서버 시간을 우아한 방식으로 표시하는사용자 정의 가능한 다국어 디지털 시계 jQuery 플러그인입니다.다운로드 받은 파일의 압축을 해제한뒤,index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다.사용방법은 아래와 같습니다.

svg 파일소스 형태라 크기나 색상 변경이나 편집이 가능합니다.

css만으로 디자인 되어 있습니다. 에니메이션 효과입니다. 진행률의 단계를 지정합니다. 그래프의 표현단계입니다.