일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- #웹솔루션
- jquery
- 게시판
- #뉴스
- CGIMALL
- #jQuery
- 솔루션
- javascript
- #솔루션
- #CSS
- 웹솔루션
- 해피CGI
- #쇼핑몰
- #해피CGI
- #cgimall
- #이미지
- 사이트제작
- #홈페이지
- 해피씨지아이
- #동영상
- #홈페이지제작
- happycgi
- 이미지
- php
- 홈페이지
- 홈페이지제작
- #happycgi
- CSS
- #image
- #업종별
- Today
- Total
웹솔루션개발 25년 노하우! 해피CGI의 모든것

SVG 글자에 애니메이션을 추가하여 역동적인 디자인을 할 수 있습니다.HTML, CSS, JS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다. HTML C263.5,51.4,263.6,52,263.6,52.7z" /> C213.6,54.7,213.6,53.7,213.6,52.7z" /> C230.7,28.6,234.5,27.7,238.5,27.7z" /> 327,55.5 336.8,65.6 359.9,49.7 " /> ..

버튼 디자인으로 마우스 오버 시 버튼 배경이 바뀌는 애니메이션이 있습니다.HTML, CSS, JS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다. HTML Squircle Long Squircle Button OKCSSbody { height: 100svh; display: grid; place-items: center; background: #faffec;} @property --bg-rotate { syntax: ''; initial-value: 0deg; inherits: false;} JS// technique pulled from:// https://www.simeongriggs.dev/responsive-extendable-squircles-with-sv..

햄버거 버튼을 클릭하면 메뉴가 서서히 나타나는 오버레이 메뉴 기본형입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 Homepage Company Products About us Contacts CSS 소스* { font-family: 'Raleway', sans-serif; font-weight: 300;} #toggle { position: absolute; top: 30px; right: 30px; width: 30px; height: 21px; cursor: pointe..

마우스를 올리면 제목, 평점 등 다양한 정보가 나타나는 마우스 오버 효과입니다.응용하여 다양하게 활용 가능합니다.HTML 구조 ...자세한 소스는 데모 사이트를 통해 확인해 주세요. CSS 소스body { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #f5f5f5;} .wrapper { position: relative; width: 100%; height: 100%; padding: 20px; display: flex; align-content: center; justify-content: center; gap: 2..

스위치 형태의 토글 버튼입니다.클릭시 자연스러운 애니메이션 효과가 있습니다.css를 조절하여 에니메이션 효과를 간단하게 수정할 수 있습니다.첨부파일을 다운로드 받거나 해당 사이트에서 전체 html,css 소스를 다운로드 받을수 있습니다.

https://github.com/microsoft/PowerToys/releases사이트에서 프로그램을 다운로드 받을수 있습니다.설치하시면 윈도우 탐색기에서도 위와 같이 svg 파일을 미리 볼 수 있습니다.설치후 작동을 하지 않는다면 아래 내용을 확인하세요PowerToys가 관리자 권한으로 실행되었는지 확인 - PowerToys 실행 아이콘 우클릭 → "관리자 권한으로 실행" PowerToys 버전 확인 및 업데이트 - https://github.com/microsoft/PowerToys/releasesPowerToys가 시작 시 자동 실행되도록 설정 - PowerToys 설정 > General(일반) > "시작 시 PowerToys 실행" 활성화호환성 문제 확인 - Windows 10 1903 이상 ..

마이크로소프트에서 제공하는 VS Code를 구동하는 엔진으로 제작된 매우 강력한 코드 에디터인 Monaco Editor 입니다.https://microsoft.github.io/monaco-editor/ 아래와 같은 Diff 에디터도 제공이 됩니다.https://github.com/microsoft/monaco-editor 페이지에서 최신 소스를 다운로드 및 설치방법을 볼 수 있습니다.

쉽게 장착이 가능한 가벼운 에디터 Ace Editor 입니다.https://ace.c9.io/ https://ace.c9.io/#nav=howto 페이지에서 장착 방법 확인이 가능 합니다.API 레퍼런스는 아래 페이지를 참고 해주세요.https://ajaxorg.github.io/ace-api-docs/

videoBackground 는 가볍고 반응성이 뛰어난 비디오 배경 플러그인으로, HTML5나 Youtube 비디오를 특정 컨테이너의 배경으로 사용할 수 있습니다.정말 가볍게 사용할 수 있어서 장점입니다.# 사용방법1. jQuery 라이브러리(슬림 빌드)와 jQuery videoBackground 플러그인을 html 파일에 가져옵니다.script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"crossorigin="anonymous">script>script src="build/videoBackground.j..