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

안녕하세요 해피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 테두리를 맞춤으로 설정할 수 있는 사이트입니다.

버튼 웨이브 효과가 있으며 반응형 슬라이드 입니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.HTML               Fruity                                                Pear              https://www.yudiz.com/codepen/fruity/cane.svg" alt="" />        https://www.yudiz.com/codepen/fruity/Labels.jpg" alt="" />                                                         https://www.yudiz.com/codepen/fruity/pear-one.png" alt="pear-image" /> ..

로그인 박스에 마우스를 올리게 되면 주면 애니메이션 디자인이 바뀌게 됩니다.자세한 내용은 데모사이트 주소에서 확인이 가능합니다.HTML            Login                                                    Forget Password      Signup       CSS @import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap");* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: "Quicksand", sans-serif;}body {  display: flex;  justify-con..

기상청에서 제공하는 다양한 날씨정보를 API로 받아 갈 수 있습니다.https://apihub.kma.go.kr/ 웹페이지에서 회원가입이후 이용을 할 수 있습니다.일반회원은 일일 최대 20,000건의 API호출이 가능 합니다.API로 제공되는 정보는 아래와 같습니다.각각의 API별로 샘플코드도 제공이 되므로 참고해서 작업을 하면 편하게 작업이 가능 합니다.

쉽고 가볍게 사용이 가능한 TOAST UI - Rolling 입니다.https://ui.toast.com/tui-rolling https://github.com/nhn/tui.rolling 페이지에서 최신 소스를 다운로드 할 수 있습니다.API 사용법은 https://nhn.github.io/tui.rolling/latest/ 페이지에서 확인 해주시면 됩니다.