목록happycgi (2267)

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

[해피CGI][cgimall] 가벼운 HTML5 위지윅(WYSIWYG) 에디터 - Trumbowyg.js

- 라이센스 MIT - 설치 방법 혹은 압축 파일을 다운로드한 후 서버에 업로드하여 Putty 등 콘솔로 압축을 풀어도 됩니다. - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 언어 JS 파일을 링크합니다. (한국어 : ko) 다른 나라 언어 JS 파일명은 플러그인 사이트를 참고하세요. 3. 에디터에서 사용할 각종 에디터 확장 플러그인을 추가합니다. 각 에디터 확장 플러그인 설명과 데모는 아래 URL을 참고하세요. https://alex-d.github.io/Trumbowyg/documentation/plugins/ 4. 위지윅 에디터를 실행합니다. 5. 에디터와 확장 플러그인의 커스터마이징도 가능하니 해당 문서는 플러그인 사이트를 ..
웹프로그램밍 자료실/JAVA 자료 2022. 11. 15. 14:13
[해피CGI][cgimall] SNS 공유 버튼 추가 jQuery 플러그인 - Socialjs

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 버튼을 출력할 DIV 를 추가합니다. 3. 플러그인을 호출합니다. 4. 불필요한 SNS 공유 버튼을 제거하거나, 원하시는 SNS 공유 버튼을 추가할 수 있습니다. 삭제 및 추가 방법은 플러그인 사이트 링크를 참고하시기 바랍니다. 5. 버튼 커스터마이징도 가능합니다. - 작동 예제
웹프로그램밍 자료실/JAVA 자료 2022. 11. 11. 09:37
[해피CGI][cgimall] Toggle Long Text Block With Smooth Animations - dReadmore

데모 확인은 다운로드 받은 파일의 압축을 해제한 뒤 demo/index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 길이가 긴 텍스트를 웹브라우저의 화면크기에 따라서 위 그림 처럼 텍스트의 일부는 화면에 표시를 해주고, 나머지 텍스트들은 show more 링크를 눌러보면, 감추어져 있던 텍스트들이 화면에 애니메이션 효과와 함께 표시가 됩니다. 웹브라우저의 크기를 조절을 해보면, 화면크기에 맞춰서 텍스트들을 숨기고, show more 버튼을 눌러보면, 숨어있던 텍스트들이 표시가 되게 됩니다. 사용법은 아래와 같습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 11. 10. 09:21
[해피CGI][cgimall] 웹사이트 통합 진단 클리닉

차세대웹기술지원센터에서 무료 제공중인 홈페이지 통합 진단 클리닉 입니다. 액티브X, 웹표준, 웹연결성, 웹개방성, 플래시 진단이 가능 합니다. https://www.koreahtml5.kr/front/diagnosis/diagnosticInfo.do 페이지로 접속하여 안내사항을 읽어본뒤, 통합진단을 받을 수 있습니다. 진단을 시작하게 되면 진단ID 가 노출이 되는데, 해당 진단ID를 통해 추후 결과를 확인이 가능 합니다. 진단결과 조회 페이지에서는 URL 또는 진단ID로 검색이 가능 합니다. 실제 결과를 조회 해보면 아래와 같이 각 항목별로 탭을 통해 내역 확인이 가능 합니다.
웹프로그램밍 자료실/기타 자료 2022. 11. 9. 09:13
[해피CGI][cgimall] Google Trends - 검색어 동향 조회

전세계 사용자들의 검색어 동향을 살펴 볼 수 있는 Google Trends 입니다. https://trends.google.co.kr/ 페이지로 접속시 검색어를 입력 할 수 있습니다. 아래는 "중고차"로 검색을 한 결과 입니다. 검색어 비교 기능도 있으므로 아래와 같이 비교하여 결과물도 확인이 가능 합니다. 결과 아래에는 지역별 통계도 확인이 가능 합니다.
웹프로그램밍 자료실/기타 자료 2022. 11. 8. 09:09
[해피CGI][cgimall] Tiny Background Parallax Scrolling Effect Plugin - Diurnal Parallax

다운로드 받은 파일의 압축을 풀면 나오는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 스크롤을 내리거나, 올릴때 웹페이지의 배경에 시차를 둔 스크롤 효과를 확인해볼 수 있습니다. 스크롤을 내리면 아래의 그림 처럼 웹페이지의 배경이 시간의 차이를 두고 변경이 되는 효과를 확인해볼 수 있습니다. 사용하는 방법은 위 설명을 참고하면 되겠습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 11. 7. 09:16
[해피CGI][cgimall] Css Scrollsnap

스크롤시 별다른 스크립트없이 css만으로 최상단으로 이동이되는 효과입니다. scroll-snap-type와 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type scroll-snap-align을 https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align 이용하여 스냅을 이용하여 스크롤시 지정한 포인트로 바로 이동할 수 있습니다. 아래의 링크에서 예제를 확인하실 수 있습니다. https://codepen.io/serranoarevalo/pen/xxdYBxZ 네이버 또는 구글에서 Css Scrollsnap으로 검색해보시면 다양한 자료를 확인하실 수 있습니다 ^^
웹프로그램밍 자료실/HTML 자료 2022. 11. 4. 09:35
[해피CGI][cgimall] php 라이브러리 모음 awesome php

php에는 여러 라이브러리들이 있습니다. 링크에 접속하시면 아래처럼 다양하게 활용할 수 있는 라이브러리 목록이 있습니다. php 공부나 코딩을 할 때에 참고하시면 좋을듯 합니다. 자세한 내용은 아래 링크를 참고 부탁드립니다. https://github.com/ziadoz/awesome-php
웹프로그램밍 자료실/PHP 자료 2022. 11. 3. 09:38
[해피CGI][cgimall] Canvas 를 이용한 스크래치 기능(쿠폰번호 긁기)

JavaScript 및 HTML5 캔버스 를 사용하여 스크래치 카드 기능을 만들 수 있습니다. Vanilla JavaScript 플러그인을 사용하면 처음부터 표시될 쿠폰 코드 또는 기타 당첨 코드를 숨길 수 있습니다. 스크래치 영역 뒤에 숫자/텍스트를 배치할 수 있습니다. 사용자는 마우스 커서로 긁거나 스와이프를 터치할 수 있습니다. 또한 실시간 스크래칭 애니메이션을 보여줍니다. 라이센스는 MIT 입니다. 적용 방법 1. HEAD 에 STYLE 을 추가 합니다. 2. BODY 에는 CANVAS 코드를 추가 합니다. 3. 마지막으로 관련 스크립트를 로더 합니다. 압축파일을 해제하면 index.html 파일을 통해 바로 확인할 수 있습니다.
웹프로그램밍 자료실/JAVA 자료 2022. 11. 2. 09:11
[해피CGI][cgimall] Click 이벤트로 구성된 드랍다운 메뉴

clicky-menus 는 드롭다운 메뉴 onclick 이벤트를 만드는 데 도움이 되는 가벼운 JavaScript 플러그인입니다. 메뉴는 클릭, 탭 또는 키보드 / 키로 열 수 있는 1단계 드롭다운 메뉴 와 함께 제공 됩니다(포커스가 있을 때) 플러그인은 각 상위 항목(드롭다운 링크)을 버튼 요소로 변환하여 드롭다운을 확장합니다. 드롭다운을 토글하기 위해 마우스, 터치 및 키보드 상호 작용을 지원합니다. 마찬가지로 사용자가 메뉴 외부를 클릭하면 열린 드롭다운을 닫을 수 있습니다. 또한 브라우저에서 JavaScript가 비활성화된 경우 메뉴도 작동합니다(순수 CSS 사용). 라이센스는 MIT 입니다. 적용 방법 안내 입니다. 1. CSS 파일을 HTML페이지 HEAD 에서 로드 합니다. 2. 이제 BODY..
웹프로그램밍 자료실/JAVA 자료 2022. 11. 1. 12:22
Prev 1 ··· 74 75 76 77 78 79 80 ··· 227 Next