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

좌측툴팁과 하단툴팁이 있습니다. css 수정으로 방향을 변경할 수 있습니다. html 파일에서 간단히 방향을 호출해서 사용이 가능합니다.

CSS로만 이루어진 셀렉트 박스입니다. 자료는 해당 데모사이트에서 하단의 export 버튼을 눌러 다운 받으실 수 있습니다. 사용자 데모도 https://codepen.io/aron-tw/pen/MeMKON 에서 확인하실 수 있습니다^^

아래와 같이 에니메이션 효과가 있습니다. css로 구현이 되어 있어 디자인 변경이 용이 합니다. 년도 텍스트 및 수평바 그래프 에니메이션 효과도 css로 쉽게 수정이 가능합니다.

아래와 같이 에니메이션 효과가 있습니다. css와 svg로 구현되어 있어 쉽게 크기 및 디자인 수정이 가능합니다. 에니메이션 효과도 css를 이용하여 변경이 가능합니다. 해당사이트 또는 첨부파일을 다운로드 받아 소스를 확인할 수 있습니다.

그룹/하위 항목을 지원하는 편리한 아코디언 메뉴입니다. CSS 기반으로 지원하는 다단계 아코디언 메뉴 Multi-Level Accordion Menu 아코디언 메뉴 시 즉각 반응한 기본효과인데, 다양한 애니메이션을 더욱 좋아할 경우 JavaScript 가 포함된 버전도 괜찮습니다.

pause 버튼 클릭시 동영상 멈춤 paused 버튼 클릭시 동영상 재생 동영상 멈춤/재생이 페이드 아웃 효과 첨부파일 다운로드 또는 해당 사이트 자세한 소스 확인이 가능합니다.

햄버거 메뉴 클릭시 아이콘이 병경됩니다. 햄버거 메뉴 클릭시 전체메뉴 영역이 에니메이션 효과와 함께 오픈됩니다. 자세한 소스확인은 첨부파일 다운로드 또는 해당 사이트에서 확인이 가능합니다.

세로 스크롤 형태의 테이블입니다. 상단의 타이틀이 고정된채로 내용을 보여주는 형식입니다. 데모 사이트로 이동하신 후 하단의 export버튼을 눌러 자료를 다운 받으실 수 있습니다.^^

Dynamic Calendar 는 추가 라이브러리를 필요로 하지 않습니다. data-lang 라고 하여 나라별 언어를 설정할 수 있습니다. 사용방법은 https://www.codehim.com/date-time/dynamic-calendar-in-javascript-with-example/ 에서 확인 가능합니다. 소스파일 보시면 data-lang 설정이 있으며 en, id, fr 3가지 설정가능 하며 한국어가 없어서 ko 항목을 추가 적용하여 소스를 제공했습니다.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 컨텐츠를 생성하고 플러그인을 호출합니다. 3. 어떤 작업을 시작한 후 로딩 표시를 출력합니다. 4. HTTP/AJAX 요청이 완료된 후 로딩 표시를 숨깁니다. 5. 로딩 표시와 숨김 애니메이션의 속도를 조절할 수 있습니다. 6. 플러그인을 비활성화 시킬 수 있습니다. - 작동 예제