일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 29 | 30 | 31 |
- #솔루션
- #업종별
- 해피씨지아이
- 쇼핑몰
- #동영상
- #홈페이지
- jquery
- 솔루션
- javascript
- 웹솔루션
- #뉴스
- #jQuery
- CGIMALL
- 홈페이지제작
- happycgi
- #웹솔루션
- 게시판
- #이미지
- 해피CGI
- 사이트제작
- #happycgi
- #image
- php
- 홈페이지
- #해피CGI
- CSS
- #쇼핑몰
- #홈페이지제작
- #cgimall
- #CSS
- Today
- Total
목록웹프로그램밍 자료실/JAVA 자료 (765)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
summernote 개인적으로 추천 드릴만한 위지윅 에디터 입니다. 아주 심플하고 어디 가져다 붙여도 자연스러운것 같습니다. 사용도 정말 간단합니다. 더더욱 국내 개발팀이 라는것이 마음에 드는군요~! HTML, CSS와 JS만으로 동작합니다. 사실 HTML5 와 bootstrap 과 JQuery 프레임웤을 이용하는거긴하지만. HTML, CSS, JS입니다. (대부분 그런가요? ㅎㅎ) 보십시요~! 얼~마나 멋집니까~! ㅋ (안 멋지면 죄송...) 디자인 변경 및 사용자 변경 안내 http://summernote.org/deep-dive/#customization 그런데 사실 IE8 에서 안됩니다.... HTML5 와 bootstrap 이 좀,,,, Support bootstrap 3.x.x Lightwei..
지정된 객체를 드래그해서 정해진 영역에 넣는 기능 Droppable 지정된 객체를 지정되 영역에 드래그앤 드롭하면 출력화면이 Droppable기능입니다. 전체 화면에서 원하는 객체를 만들고 지정된 영역을 설정하여 드래그 앤 드롭할 수 있습니다. 각종 포탈 에서 특정 이미지를 영역에 드롭시 광고가 플레이되는 등의 효과로 이용이 가능합니다. 드롭시 효과, 드래그 후 효과 다양한 이벤트를 제공하고 있으며. 사이트에 다양한 효과를 줄수 있어서 좋은것 같네요.
데모페이지를 통해서 어떤 형태의 메뉴인지는 확인이 가능합니다. 예제1) 메뉴를 접어놨을때 메뉴를 클릭해서 펼쳐놨을때 예제2) 메뉴를 가로로 펼치는 예제네요. 메뉴를 접어놨을때 메뉴를 펼쳐놨을때 예제3) 각 메뉴에 해당하는 원의 크기를 조절하는 예제 메뉴를 접어뒀을때 메뉴를 펼쳐뒀을때 가장 위의 빨간색 메뉴는 펼쳐져 있을때 각 메뉴를 구분하기가 어려운 식이었는데, 원을 약간 줄여놓으니 각각의 메뉴라는 인식이 더 쉽게 되네요. 예제4) 상하로 펼쳐지는 메뉴에 대한 예지 메뉴를 접어뒀을때 메뉴를 펼쳤을때 예제5) 메뉴를 펼치거나, 접을때 이벤트를 이용해서 효과를 다르게 주는 예제 메뉴를 접었을때 메뉴를 펼쳤을때 메뉴의 색상이 바뀌고, 선택하려는 메뉴의 색상도 같이 바뀌는 식의 효과를 줄수도 있네요. 모바일 환..
HTML5, CSS3 및 JavaScript 를 사용하여 간단한 다이얼 ui 제작이 가능합니다. 해당 사이트에는 소스에 대한 자세한 설명이 되어있습니다. 다이얼을 클릭하면 좌측에 번호가 입력됩니다. 다이얼 화면은 css 를 수정하여 직접 디자인이 가능합니다.
https://www.youtube.com/watch?v=_Ww8GxozMco 위의 유투브 링크로 해당 기능을 영상으로 확인 가능합니다. 설치 방법은 아래와 같습니다. 1. blueimpgallery.zip 파일을 압축을 풉니다. 2. blueimpgallery 폴더를 ckeditor / plugins 안에 복사합니다. 3. ckeditor / config.js 파일을 엽니다. 4. config.extraPlugins = 'widget,lineutils,blueImpGallery'; config.filebrowserBrowseUrl = '/browser/browse.php'; config.contentsCss = 'https://blueimp.github.io/Gallery/css/blueimp-gall..
이미지를 슬라이드 할수 있는 스크립트입니다. 다운로드 받은 파일의 압축을 풀어서 index.html 을 웹브라우져로 열어보시면 됩니다. 지원하는 기능이 몇가지가 있는데, 1. 마우스와, 터치 이벤트에 의해서 이미지가 슬라이드 되는 기능 2. 이미지와 HTML태그를 섞어도 슬라이드가 되는 기능 3. 슬라이드 자체의 크기를 비율에 맞게 조절되는 기능 4. 슬라이드의 모든 부분을 편집하거나, 비활성화 하는 기능 이미지 + HTML 컨텐츠로 슬라이드가 되는 예제 화면크기에 맞춰서 사이즈가 조절되는 예제라는데 확인이 되지는 않네요.. 스마트폰기기로 접근해보면 달라지려나 싶긴 하네요. 슬라이드가 작동이 되는 세부기능들이 조절하는 것이 가능한 예제 슬라이드가 자동으로 전환되는 주기, 1번에서 2번으로 전환되는데 까지..
https://www.youtube.com/watch?time_continue=42&v=EJJZxuYV64A 해당 기능은 위의 유투브 영상으로 확인이 가능합니다. 설치 방법은 아래와 같습니다. 1. boxShadow.zip 파일 압축을 풉니다. 2. boxShadow 폴더를 ckeditor / plugins 폴더에 복사합니다. 3. ckeditor / config.js 파일을 엽니다. 4. config.extraPlugins = 'boxShadow'; config.allowedContent = true; config.boxShadow_minValue = -50; config.boxShadow_maxValue = 50; 위의 소스를 추가합니다. 5. config.toolbar = [ { name: 'ins..
Google 에서 제작한 차트 프로그램 입니다. Javascript로 구동이 가능합니다.^^ 각종 데모 페이지와 샘플 소스는 아래 페이지에서 확인이 가능 합니다. https://google-developers.appspot.com/chart/interactive/docs/gallery 위 페이지에 접속을 해보시면 Geo Chart, Scatter Chart, Column Chart, Histogram 등의 종류별로 정리가 되어 있고, 각각의 차트 종류를 클릭을 해보시면 상세한 정보를 확인이 가능 합니다. 예를들어 Combo Chart 클릭을 하게 되면 https://developers.google.com/chart/interactive/docs/gallery/combochart 페이지로 이동이 되며, C..
* ckeditor - Background Image - 이 플러그인은 본문안에 배경이미지 삽입을 도와주는 플러그인 입니다. * 라이센스(무료) - MIT * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/bgimage - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'bgimage'; config.allowedContent = 'div{*}'; //중요함 - 위지윅에디터를 확인하면 아이콘이 추가 된 것을 확인할 수 있으며, 배경이미지 정보를 설정하시면 됩니다.
* Intro.js 소개 - 사이트의 단계별,섹션별로 가이드가 가능하며 멘트나 이미지를 부각 시켜 수 있는 플러그인 * 라이센스 - GNU AGPLv3 * 사용방법 기본제공되는 css 를 상단에 선언합니다 아래와 같이 단계별 가이드를 하여 내용을 부각시키기 위한 버튼을 만들어 줍니다 스크립트로 시작하여 data-step 옵션과 같이 몇단계에서 보여줄지 지정할 수 있습니다 마지막으로 intro.js 의 호출 부분으로 구성은 마무리 됩니다 위와 같이 단계별 tooltip 기능을 보여줌으로써 사이트의 차트 플로우나 내용이 복잡한 부분에 있어서 쉽게 설명해 줄 수 있을것으로 생각됩니다