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

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

햄버거 버튼을 클릭하면 메뉴가 서서히 나타나는 오버레이 메뉴 기본형입니다.응용하여 다양하게 활용 가능합니다.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 페이지에서 최신 소스를 다운로드 및 설치방법을 볼 수 있습니다.