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

- 소개bsCalendar는 Bootstrap 5 프레임워크 와 Font Awesome 6의 상징적인 글꼴을 사용하여 유연하고 사용자 정의가 가능하며 다국어이고 모든 기능을 갖춘 이벤트 달력을 만드는 jQuery 플러그인입니다. 다음 프로젝트에서 다운로드하여 이벤트, 약속, 작업 및 기타 일정 관련 정보를 Bootstrap 5의 모양과 느낌과 일관되게 정리된 직관적인 캘린더 인터페이스로 표시해 보세요.- 라이센스MIT- 사용 방법1. 문서에 필요한 jQuery 라이브러리, Bootstrap 5 프레임워크, Font Awesome 6 아이콘 글꼴을 로드합니다.2. 플러그인을 다운로드하고 jquery.bs.calendar.jsjQuery 뒤에 스크립트를 로드합니다.3. 플러그인이 이벤트 달력을 생성하는 D..

- 소개LC Switch는 기본 체크박스와 라디오 입력을 CSS3 전환으로 구동되는 부드러운 슬라이딩 효과와 함께 예쁜 스위치나 토글 버튼으로 변환하는 작은 jQuery 및 Vanilla JS 플러그인입니다.- 라이센스MIT- 사용 방법1. jQuery 라이브러리와 jQuery LC Switch 플러그인 파일을 프로젝트로 가져옵니다.2. 체크박스나 라디오를 만들어 플러그인을 호출합니다.3. 사용할 수 있는 함수들은 다음과 같습니다.4. 사용할 수 있는 이벤트는 다음과 같습니다.- 작동 화면

**CSS Gooey Menu (Version 3)**는 SVG 필터와 CSS 트랜지션을 조합해 만든 인터랙티브한 원형 메뉴입니다.버튼 클릭 시 서브 메뉴들이 액체처럼 부드럽게 퍼지고 합쳐지는 **'Gooey 효과'**가 특징이며, 시각적으로 독특하면서도 부드러운 사용자 경험을 제공합니다.SVG 필터 기반이라 가볍고 해상도에 독립적이며, JavaScript 없이 순수 CSS로도 구현이 가능합니다.HTML 구조Gooey MenuUsing CSS and SVG FiltersBy https://codepen.io/lbebber">Lucas Bebberhttps://codepen.io/lbebber/pen/LELBEo" target="_blank" rel="noopener">Version 1 - https://..

Pure SVG Loader Animation은 SVG 태그만으로 구현된 로딩 애니메이션으로, CSS나 JavaScript 없이도 동작하며 가볍고 해상도에 독립적입니다.CSS로도 스타일 확장이 가능해 다양한 로딩 효과를 연출할 수 있어 웹 성능과 디자인 모두에 유리합니다.HTML 구조Pure SVG Loader attributeName="transform" attributeType="XML" type="rotate" dur="5s" from="0 50 50" to="360 50 50" repeatCount="indefinite" /> attr..

위와 같이 예쁜 다이알로그를 사용할 수 있습니다.https://github.hubspot.com/vex/위의 사이트에 방문하면 예제와 설명이 설명 되어있습니다.위와 같이 js,css 를 선언하고 테마를 선택한 후 스크립트를 실행 하면 됩니다.하나의 예를 설명 드리면위와 같이 예제 소스를 실행하면위와 같은 confirm 창을 만들 수 있습니다.예쁜 다이알로그를 사용하고 싶다면 추천 드립니다.

data 요소로 시간을 지정해두면 얼마나 시간이 지났는지 알려주는 jquery 입니다.위와 같이 jquery js 를 선언하고 time 태그에 클래스 timeage 로 지정해주면위 처럼 해주면 해당 시간 이후 흘러간 시간이 얼마인지 알려줍니다.업데이트 후 얼마나 시간이 지났는지 등을 알려주는 곳에 사용하면 좋을 jquery 소스 입니다.

안녕하세요 해피CGI 입니다.임대형 해피 인터넷강의 웹솔루션 Ver3.6 [단독형]으로 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다. 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장 + 콜러스 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 내장) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 내장 + 콜러스 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 C(쇼핑몰 내장) 해피 인터넷강의 솔루션 스킨 C(쇼핑몰 내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 C(쇼핑몰 내장 + 콜러..

안녕하세요 해피CGI 입니다.해피 인터넷강의 웹솔루션 Ver3.6 [단독형]으로 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다. 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 비내장) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 비내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 비내장 + 콜러스 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 A(쇼핑몰 내장 + 콜러스 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 비내장) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 비내장 + 보안플레이어 포함) 해피 인터넷강의 솔루션 스킨 B(쇼핑몰 비내장 + ..

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..