일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- CGIMALL
- #image
- php
- #홈페이지
- jquery
- happycgi
- #동영상
- #해피CGI
- #홈페이지제작
- 게시판
- 쇼핑몰
- 해피CGI
- #웹솔루션
- #jQuery
- #cgimall
- #뉴스
- #이미지
- #쇼핑몰
- CSS
- 솔루션
- #happycgi
- javascript
- 해피씨지아이
- #솔루션
- 홈페이지제작
- 사이트제작
- #CSS
- 웹솔루션
- 홈페이지
- #업종별
- Today
- Total
목록웹프로그램밍 자료실 (2652)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/dBs7zu/btrXGoaOcFe/dPY4Hoj8x3oCg9sSt2pspK/img.jpg)
https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#fullpagejs 위의 링크에 들어가보시면 한글로 사용설명이 아주 쉽게 안내 되어있습니다. 들어가는 파일, 초기 셋팅 방법 등 친절하게 한글로 설명 되어있습니다. 한번 쭉 훌터보시는걸 추천 드립니다. 상업 라이선스도 판매하고 있습니다. 오픈소스로 사용하시엔 위의 내용을 참고하여 사용하시면 되겠습니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bnuAgn/btrXo4rybQf/EutYtNQ8fge0qHNvUf8POK/img.jpg)
첨부된 파일의 압축을 해제한 뒤 웹브라우저로 demo/index.html 파일을 열어보면 데모 확인이 가능합니다. 아래와 같은 특징이 있습니다. - AJAX GET 요청을 사용하여 달력에 날짜 이벤트를 추가할 수 있습니다 . 응답은 지정된 형식으로 JSON 인코딩된 이벤트 배열을 반환해야 합니다. Bootstrap JS 모달 창 을 사용하십시오 . 정보는 이벤트 당일 클릭으로 표시됩니다. - 달력에 표시되는 날짜 이벤트의 스타일을 명확히 하기 위해 범례를 추가할 수 있습니다. - 달력은 여러 언어를 지원합니다. - 특정 날짜에 onclick 이벤트가 발생할 때 실행할 함수를 캘린더에 추가할 수 있습니다. - 여러 가지 방법으로 캘린더의 탐색 및 모양을 변경할 수 있습니다. 기본적인 달력은 위 그림과 같습..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/batT6q/btrXlhXtryk/bndEksJvo4Sy4LEldnUQnk/img.jpg)
사이트 제작시 많이 사용되는 Parallax Scroll Down Button 소스를 공유합니다. HTML 소스 Scroll Down Button #1 Scroll Scroll Down Button #2 Scroll Scroll Down Button #3 Scroll CSS 소스 @import url(https://fonts.googleapis.com/css?family=Josefin+Sans:300,400); * { margin: 0; padding: 0; } html, body { height: 100%; } section { position: relative; width: 100%; height: 100%; } section::after { position: absolute; bottom: 0; l..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/QAAej/btrXaDHra00/pUPhHzFUT8BC4VokUzq2xK/img.png)
bar 회전형 디자인의 html 과 CSS로 이루어진 preloader 페이지 로딩 스타일 6개의 세로 바가 순차적으로 회원하면서 로딩 중임을 알려주는 스타일입니다. 자바스크립트 없이 순수하게 html 과 CSS로 이루어져 있으며, 색상, 높이, 너비 등을 CSS 편집을 통해서 수정 가능하며, 단순하지만 효용성이 좋은 자료입니다. 세로 막대 개수 추가는 물론, 회원 속도도 설정이 가능합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/veFNh/btrWZXMMeC1/FKZnbxD1txeXPd6U7RtGkK/img.png)
세로바 디자인의 html 과 CSS로 이루어진 preloader 페이지 로딩 스타일 5개의 세로 바가 순차적으로 움직이면서 로딩 중임을 알려주는 스타일입니다. 자바스크립트 없이 순수하게 html 과 CSS로 이루어져 있으며, 색상, 높이, 너비 등을 CSS 편집을 통해서 수정 가능합니다. 세로 막대 개수 추가도 자유롭게 가능합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/0zRyK/btrWJWt7MwG/5qRC9PihSOPSw3wmOvR7k1/img.jpg)
progress 태그를 이용하여 간단하게 바형태를 만들수 있습니다. Value와 min, max 값을 이용하여 바형태를 조정할 수 있습니다. https://codepen.io/kimpare/pen/WNKeOma 페이지에서도 데모를 확인하실 수 있습니다 ^^
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/TAGsk/btrWDD11A7h/p562wk58e0U6rTKeIkwzcK/img.jpg)
ACL은 계층 적 JSON 데이터에서 접을 수있는 트리 구조를 생성하는 가볍고 사용하기 쉬운 jQuery 트리보기 플러그인입니다. 각 맨 위 트리 항목에는 아코디언처럼 확장 및 축소할 수 있는 하위 항목이 포함되어 있어 사용자에게 시각적 일관성을 제공하여 트리 구조의 수준 사이를 쉽게 탐색할 수 있습니다. 폴더 (디렉토리) 트리와 수직 아코디언 메뉴에 적합합니다. 다운로드 받은 파일의 압축을 해제한 뒤 src/index.html 파일을 웹브라우저로 열어보면 데모 확인이 가능합니다. 위 그림과 같은 화면이 표시되고, 각각의 메뉴를 클릭을 하면 하위 메뉴가 펼쳐지는 아코디언 메뉴입니다. 사용법은 아래와 같습니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/byUFDd/btrWBcJfA3B/P82EwGPokjdegD3k71Ggr1/img.jpg)
- 라이센스 MIT - 사용 방법 1. 정보 및 이미지 자르기 컨테이너를 만듭니다. 2. 자르기를 실행할 버튼을 추가합니다. 3. JQuery 라이브러리와 cropimage.js 파일을 불러옵니다. 4. 자르기 컨테이너에서 플러그인을 호출하고 자르기 원하는 이미지는 지정합니다. 5. 잘라낸 이미지를 페이지에 표시합니다. 6. 옵션을 변경할 수 있습니다. - 작동 예제
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bFWGVn/btrWpZSyAbt/JoLYWUTm3vLD0CJ1VHIFkK/img.jpg)
- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 Jquery.number.format.js 파일을 호출합니다. 2. 숫자 값 앞/뒤로 붙일 화폐 표시도 설정할 수 있습니다. 3. 천 단위에 기분 기호를 지정할 수 있습니다. 기본값 : 콤마(,) 4. 소수점 이하 숫자를 지정된 자리수만큼만 표시할 수 있습니다. 기본값 : 2 5. 소수점 이하 숫자를 지정된 소수 자릿수로 반올림 할 수 있습니다. 기본값 : true 6. 소수점 구분 기호를 지정할 수 있습니다. - 작동 예제