일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #동영상
- #happycgi
- #홈페이지
- #image
- #솔루션
- #웹솔루션
- #해피CGI
- #CSS
- #이미지
- php
- #jQuery
- 쇼핑몰
- CGIMALL
- happycgi
- jquery
- 홈페이지제작
- 홈페이지
- CSS
- javascript
- #업종별
- 게시판
- 웹솔루션
- #쇼핑몰
- 솔루션
- 해피씨지아이
- 해피CGI
- #홈페이지제작
- 사이트제작
- #cgimall
- #뉴스
- Today
- Total
목록웹프로그램밍 자료실/JAVA 자료 (765)
웹솔루션개발 22년 노하우! 해피CGI의 모든것
jqClock.js는 현재 로컬 또는 서버 시간을 우아한 방식으로 표시하는사용자 정의 가능한 다국어 디지털 시계 jQuery 플러그인입니다.다운로드 받은 파일의 압축을 해제한뒤,index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다.사용방법은 아래와 같습니다.
- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 sketchpad.js 파일을 불러옵니다. 2. 스케치패드용 HTML Canvas 요소를 추가합니다. 3. 스케치패드 플러그인을 호출합니다. 4. 선의 굵기나 색상을 지정할 수 있습니다. 5. 애니메이션과 속도를 조절할 수 있습니다. 6. 실행 취소와 다시 실행을 사용할 수 있습니다. 7. 스케치한 정보를 JSON 또는 JavaScript 개체로 내보낼 수 있습니다. 8. 저장된 스케치 정보를 불러올 수 있습니다. - 작동 화면
- 소개 오늘날 웹 성능이 직면한 가장 큰 문제 중 하나는 이미지가 대역폭 사용량의 대부분을 차지하므로 웹 페이지 속도가 느려진다는 것입니다. WebP는 Google에서 개발한 이미지 형식의 일종으로, 디스크 공간과 네트워크 대역폭을 덜 차지하며 Chrome, Opera 등과 같은 모든 주요 브라우저에서 더 잘 지원됩니다. 그러나 이미 이 형식으로 이미지를 제공하고 있지 않으면 사이트를 방문하는 방문자는 WebP 이미지에 액세스할 수 없습니다. 이 플러그인은 약간의 JavaScript(jQuery Script)를 사용하여 기존 이미지(PNG/JPG/GIF)를 모두 WebP 이미지로 대체할 수 있도록 돕기 위해 탄생했습니다. - 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 main.js 파..
위처럼 체크박스 그룹을 만들고 상단의 체크를 하면 하위 모든 체크박스가 체크 되는 기능입니다. 사용법은 간단합니다. 상단 다운로드 버튼을 눌러 다운 받은 후 cbFamily-v1.js 를 로드 합니다. 그리고 샘플로 명시된 코드처럼 진행하시면 됩니다. 설문조사 등의 페이지를 만들때 유용해 보이니 활용해 보시기 바랍니다.
심플하고 강력한 기능들을 보유한 위지윅 에디터 TOAST UI Editor 입니다. https://ui.toast.com/tui-editor 페이지에서 에디터의 구동 화면을 볼 수 있습니다. 특이한것은 일반적인 에디터 영역만 노출이 되는것이 아니라, 왼쪽, 오른쪽 화면으로 분리가 되어 있습니다. CB버튼을 통해 Code Block을 추가하고 왼쪽 화면에 명령어 형태의 정해진 값을 입력시에 오른쪽의 에디터 영역에 적용되어 노출이 됩니다. 차트 예시 이미지 : 에디터 영역만 볼려면 오른쪽 하단의 위지윅 버튼을 클릭하면 됩니다. 자세한 사용방법은 https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide-ko.md 페이지를 참고 하시면 되겠..
ddMap은 개발자가 사용자 정의 가능한 대화형 반응형 Yandex 지도를 웹 페이지에 포함할 수 있는 경량 jQuery 플러그인입니다. 위도/경도 좌표 및 팝업 콘텐츠를 포함한 마커 데이터 배열을 전달하면 ddMap이 지도에 표시합니다. 마커가 두 개 이상인 경우 모든 마커에 맞게 맵의 크기를 자동으로 조정합니다. 사용자 지정 콘텐츠로 마커를 사용자 지정하고, 확대/축소 버튼과 같은 지도 컨트롤을 설정하고, 다른 Yandex 지도 옵션을 통과할 수 있습니다. 플러그인은 맵 초기화를 처리하므로 상용구 코드를 작성할 필요가 없습니다. 사용방법은 아래와 같습니다.
SplitLines는 상자의 너비 또는 함수에 전달된 너비를 기반으로 특정 html 태그를 사용하여 텍스트 블록을 별도의 줄로 분할할 수 있는 경량 jQuery 플러그인입니다. 그런 다음 각 선의 스타일을 개별적으로 지정하고 애니메이션을 적용할 수 있습니다. 첨부된 파일의 압축을 해제하고, demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 작동원리는 아래와 같습니다. 1). 내용을 단어로 분할하여 원래 Html 태그를 유지합니다. 이 태그는 *each* 단어에 해당 단어가 있는 태그와 함께 태그를 지정하므로 래핑이 시작될 때 태그는 그대로 유지됩니다. 이것은 스타일에 영향을 미칠 수 있습니다 (예 : 여백이 있으면 각 단어가 해당 스타일을 상속합니다). 2). 단어를 공백으로 나눕니다. ..
Javascript 를 이용하여 이미지의 필터를 설정할 수 있는 프로그램을 소개합니다. # 장점 1. 대화형 CSS 이미지 필터 편집기를 만들 수 있습니다. 2. 버튼과 슬라이더를 사용하여 다양한 이미지 필터를 적용할 수 있는 사용자 친화적인 인터페이스가 제공합니다. 3. 밝기, 대비, 채도와 같은 매개변수를 조정하여 이미지를 창의적으로 수정할 수 있습니다. 4. 슬라이드를 통해 즉각적인 적용 효과를 확인할 수 있습니다. # 사용법 압축파일 해제하시면 index.html , index2.html 파일이 있습니다. index.html 파일은 데모로 제공되는 파일입니다. index2.html 파일은 간략하게 축소한 버젼의 파일 입니다. 실제로 사용해보니 필터를 자주 사용하시는 경우 사용하면 좋을것 같습니다...
- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 jquery.youtube-background.js 파일을 호출합니다. 2. 배경 요소를 만들고 배경으로 사용할 Youtube, Vimeo, HTML5 비디오 영상 주소를 data-vbg 옵션에 넣습니다. 3. 그리고 youtube_background 플러그인을 호출하면 끝입니다. 4. 각종 옵션을 제공합니다. (옵션 코드는 사이트를 참고하세요.) * 모바일에서 비활성화 여부 (기본값 false) * 재생 및 음소거 버튼 표시 여부 (기본값 false) * 영상 로드 전 배경 로드 여부 (기본값 true) * 페이지 로드 시 비디오 자동 재생 여부 (기본값 true) * 페이지 로드시 비디오 음소거 여부 (기본값 true) * 비디오 반복 ..
- 라이센스 MIT - 사용 방법 1. jQuery 라이브러리와 loading-overlay.min.js 파일을 호출합니다. 2. 로딩 텍스트와 스피너가 포함된 로딩 오버레이를 적용할 대상 요소를 만듭니다. 3. 로딩 오버레이용 CSS를 적용합니다. 샘플 CSS 코드는 사이트를 참고하세요. 4. 로딩 오버레이를 추가하거나 제거하는 트리거를 만듭니다. 5. loadingOverlay 함수를 호출합니다. 6. 옵션을 설정할 수 있습니다. - 작동 화면 (샘플 CSS 적용)