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

사이트에 접근하시면 상단에 다운로드 버튼이 있습니다.이 버튼으로 js 를 받아 사용하시면 됩니다. 용량도 1.14kb 로 굉장히 작은 용량 입니다.형변환도 지원하며, add 를 사용하여 더하기 도 지원 합니다.소수점 자리수도 지원하니, 가격표등에서 유용하게 사용가능한 js 입니다.

TickWatch는 복고풍 7세그먼트 시계와 비슷한 사용자 정의 카운트다운이나 카운트업 타이머를 만드는 작은 jQuery  플러그인 입니다.  이 플러그인은 타이머를 만들고 관리하기 위한 여러 옵션, 방법 및 이벤트를 제공합니다.타이머를 설정하여 위아래로 세고, 시작 및 종료 시간을 지정하고,시계 세그먼트의 모양을 사용자 지정할 수 있습니다. 이러한 유연성과 사용자 정의 가능성으로 인해TickWatch는 이벤트 카운트다운, 게임 타이머 또는 애플리케이션의 경과 시간 추적을 포함한 다양한 웹 프로젝트에 적합합니다. 시작 버튼을 누르면 정해놓은 시간에서 1초씩 줄어드는 카운트 다운이 되게 됩니다.사용방법은 아래와 같습니다.다운로드 받은 파일의 압축을 해제한뒤,index.html 파일을 웹브라우저로 열어보면 ..

클릭시 에니메이션 효과와 함께 탭메뉴가 변경됩니다.라디오 버튼을 이용한 탭메뉴 소스입니다.라디오 버튼과 has() 선택자를 이용한 에니메이션 탭 효과입니다.첨부된 파일을 다운로드 하거나 데모 사이트에서 전체 소스를 확인 할 수 있습니다.

선택시 라디오버튼 뿐만 아니라 포커스 되는 디자인이 시간차 에니메이션으로 효과가 적용됩니다.관련 에니메이션 소스입니다.css로 구현되어 있습니다.

안녕하세요 해피CGI 입니다. 해피 웹툰/웹소설 솔루션 Ver1.4 로 업그레이드 되었습니다.  자세한 사항은 아래의 내용을 참고하시기 바랍니다.

GSAP을 이용한 이미지 슬라이드입니다.스크롤하거나 버튼을 클릭하여 순서를 변경할 수 있고 무한으로 슬라이드됩니다.사이트를 구성할 때 다양한 방식으로 사용하기 좋습니다.  HTML 구조 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Prev Next  CSS 소스* { box-sizing: border-box;}body { background: #111; min-height: 100vh; padding: 0; margin: 0;}.gallery { position: absolute; width: 100%; height: 100vh; overflow: hidden;} .cards { position: absolute; width: 14rem; height: ..

SVG를 이용한 백그라운드 애니메이션입니다. 색상이 계속 변경되며 동적인 효과를 줄 수 있습니다. CSS 소스* {  margin: 0;  padding: 0;  box-sizing: border-box;} svg {  position: absolute;  top: 0;  left: 0;  width: 100vw;  height: 100vh;  z-index: -1;  transform: translate3d(0px, 0px, 0px);} JS 소스import tinycolor from "https://cdn.skypack.dev/tinycolor2@1.4.2";import SimplexNoise from "https://cdn.skypack.dev/simplex-noise@2.4.0"; const si..

안녕하세요 해피CGI 입니다.해피 인터넷뉴스 솔루션 Ver2.9 홈페이지가 업그레이드 되었습니다.자세한 사항은 아래의 내용을 참고하시기 바랍니다.    해피 인터넷뉴스 솔루션 스킨 A(미니홈 비내장)  해피 인터넷뉴스 솔루션 스킨 A(미니홈 내장)  해피 인터넷뉴스 솔루션스킨 B(미니홈 비내장)  해피 인터넷뉴스 솔루션스킨 B(미니홈 내장)  해피 인터넷뉴스 솔루션스킨 C(미니홈 비내장)   해피 인터넷뉴스 솔루션스킨 C(미니홈 내장)   해피 인터넷뉴스 솔루션스킨 D(미니홈 비내장)  해피 인터넷뉴스 솔루션스킨 D(미니홈 내장)   해피 인터넷뉴스 솔루션스킨 E(미니홈 비내장) 해피 인터넷뉴스 솔루션스킨 E(미니홈 내장)  해피 인터넷뉴스 솔루션스킨 F(미니홈 비내장) 해피 인터넷뉴스 솔루션스킨 F(미..

HTML, CSS 코드를 복사 -> 붙여넣기로 간단한 버튼, 로딩바, input 효과를 적용할 수 있는 사이트입니다.1. 페이지 접속 후 사용하고 싶은 효과 클릭해 줍니다. 2. 사용하고 싶은 효과를 클릭하면 해당 효과의 HTML, CSS 등 코드가 나오는데 코드 복사 버튼을 클릭하여 적용하고 싶은 곳에 붙여넣기를 하면 됩니다.또한 색상을 쉽게 볼 수 있는 Color Picker, 각 효과를 따로 볼 수 있습니다.

테두리를 맞춤으로 설정할 수 있는 사이트입니다.기존 'border:1px dashed #000000' 코드를 사용하면 점 사이의 공간을 조절할 수 없습니다.하지만 해당 사이트에서는 background-image 코드를 사용하여 점 사이의 공간을 줄이거나 늘릴 수 있습니다.1. 사용하고 싶은 테두리를 선택2. 가로, 세로, 획, 점 사이의 공간 등 설정 3. 테두리 색상, 배경색상 설정 4. 만들어진 background-image 코드를 복사하여 붙여넣기 CSS 테두리를 맞춤으로 설정할 수 있는 사이트입니다.