일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #image
- #뉴스
- #웹솔루션
- jquery
- happycgi
- javascript
- 해피씨지아이
- CSS
- #홈페이지제작
- #이미지
- #cgimall
- php
- 웹솔루션
- #업종별
- #해피CGI
- #동영상
- 사이트제작
- 솔루션
- #홈페이지
- #happycgi
- 게시판
- 홈페이지
- 쇼핑몰
- 해피CGI
- #CSS
- #jQuery
- #솔루션
- #쇼핑몰
- CGIMALL
- 홈페이지제작
- Today
- Total
목록웹프로그램밍 자료실 (2637)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
간단하게 홈페이지에 언어 번역기를 장착하는 위젯 Conveythis 입니다.https://www.conveythis.com/ 무료버전과 유료버전으로 구분되어 있으므로,접속량이 많지 않은 사이트라면 무료버전으로 이용을 해보실 수 있겠습니다.https://www.conveythis.com/pricing/ 장착하는 방법은 간단합니다.회원가입 후에 대쉬보드에서 사이트 생성을 하게 되면 적용해야 될 소스가 나옵니다.해당 소스를 홈페이지내에 삽입을 하면 완료 됩니다.
AI 기반으로 개발된 언어분석, 어휘관계분석, 음성인식, 발음평가, 이미지/동영상 인식 API를 제공하는공공 인공지능 오픈 API , Data 서비스 포털 사이트입니다.제공되는 API 목록은 아래와 같습니다.https://aiopen.etri.re.kr/serviceList API 개발 가이드는 아래 페이지를 참고 해주세요.https://aiopen.etri.re.kr/guide/WiseNLU 다양한 언어로 구현을 한 예제도 확인이 가능 하므로,예제를 참고하여 개발을 쉽게 진행이 가능 합니다.
# 플러그인 소개 Hazel은 일정 시간 후에 자동으로 사라지는 고정된 토스트 모양의 알림 팝업 을 만드는 아주 작은 jQuery 플러그인입니다 .기본, 성공, 어둡고, 위험하고, 경고의 5가지 기본 테마가 제공됩니다. 기존 테마를 사용자 지정하거나 나만의 테마를 추가할 수도 있어 알림이 어떻게 보이는지에 유연성을 제공합니다. # 장점 CSS가 JavaScript 파일 자체에 포함되어 있다는 것입니다. 즉, 별도의 스타일 시트를 포함할 필요가 없으므로 모든 것이 깔끔하게 유지됩니다.# 라이센스MIT 라이센스# 사용방법 1. 라이브러리 호출 script src="https://code.jquery.com/jquery-3.7.0.min.js">script>script src="hazel.js">script>..
MediaElement.js는 HTML5 mediaelement API를 기반으로 하는 유연하고 강력한 jQuery/JavaScript 오디오 및 비디오 플레이어 플러그인입니다 .라이센스는 MIT 라이센스 입니다. HTML5 의 VIDEO 태그를 기반으로 한 플레이어 입니다. 지원 포맷은 MP4, MP3, WebM은 물론 Dailymotion, Facebook , SoundCloud, Twitch, Vimeo, Youtube 등 거의 모든 오디오 및 비디오 포맷을 지원합니다.압축 해제하시면 demo / index.html 파일이 있습니다. 해당 파일을 실행하시면 플레이어 화면 확인 가능 합니다. Sources 부분을 보면 영상 주소를 플레이어에게 전달합니다. label>Sources select ..
GSAP ScrollTrigger + TextPlugin- GSAP 스크롤 트리거 + 텍스트 플러그인스크롤시 텍스트가 변합니다. 메인 디자인이나 다이나믹한 디자인을 원하신다면 활용하시면 좋을거 같습니다.HTML 구조 SCROLL FOR MORE CSS 소스@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); html, body { font-family: "Open Sans", serif; font-optical-sizing: auto; font-weight: 800; font-style: normal; font-variatio..
CSS 그리드를 사용한 레이아웃 템플릿 입니다.디자인 및 페이지 레이아웃 코딩시 유용하게 사용할수 있는 팁입니다.CSS Grid와 최소한의 DOM을 사용하여 필수적인 레이아웃 템플릿 설정을 살펴보고 간단하게 페이지 레이아웃을 잡을수 있습니다HTML 구조 1 2 1 2 1 2 3 1 2 3 4 1 2 3 1 2 3CSS 소스// For more reasons to love grid, check out my article:// @link https://moderncss.dev/3-css-grid-techniques-to-make-you-a-grid-convert/// Or my additional articles that cover grid:// @link https://moderncss.dev/t..
위의 테이블을 사이즈를 줄이면위와 같이 쉽게 만들어주는 jquery 소스 입니다.변화를 주는 사이즈는 CSS 에서 조절하면 됩니다.이후 스크립트로 merge(병합), move(이동), span 등 으로 조절할 수 있습니다.해당 부분은https://github.com/codefog/restables?tab=readme-ov-file위의 링크에서 잘 설명 되어있으니 참고하시면 되겠습니다.
위와 같이 버튼에 오른쪽 버튼을 누르면 메뉴를 만들어 줄 수 있는 jquery 입니다.사용법은 간단합니다. items 으로 메뉴를 만들고,callback 에서 각 키에 따라 해당 메뉴에 따라 작동하는 스크립트를 작성하면 됩니다.해당 버튼에 다양한 기능을 넣고 싶을때에 오른쪽 버튼을 활용하여 여러 메뉴로 확장하기에 좋은 jquery 로 보입니다.
좌측 버튼 클릭시 사이드메뉴바 출력버튼 클릭시 효과와 관련된 css 소스 일부입니다.