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

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

advanced-mark.js는 웹 페이지에서 문자, 단어, 용어, 구문, 심지어 텍스트 범위를 강조 표시하는 빠르고 가벼운 JavaScript 라이브러리입니다.advanced-mark.js는 가상 DOM을 지원하므로 콘텐츠가 변경될 때 하이라이트를 효율적으로 업데이트하여 다양한 플랫폼에서 통합을 쉽게 할 수 있습니다.라이센스는 MIT 입니다.# 사용방법1. 설치 및 다운로드2 .advanced-mark.js를 가져옵니다.3. 이 mark()방법을 사용하면 찾으려는 용어를 전달하여 텍스트를 강조 표시할 수 있습니다.4. 더욱 고급 매칭을 위해 markRegExp()텍스트 패턴을 타겟으로 하는 정규 표현식을 허용합니다.5. 이 markRanges()방법은 특정 문자 범위를 강조합니다.6. 이 unmark..

온라인 이미지 편집기로 알려져 있던 PIXLR 의 새로운 서비스 AI 이미지 생성 및 디자인 도구 서비스먼저 AI 이미지 생성을 해보면1. 회원가입2. 프롬프트를 통해 원하는 사진에 대한 묘사글을 입력단, 한글은 잘 안되네요. 영어로 번역해서 넣어보세요.3. AI 생성4. 웹상에서 직접 편집도 가능하니 너무 편하네요.AI 이미지 생성외에도 배경제거, 개체 제거, 얼굴 스왑, AI 채우기등 다양한 서비스를 제공합니다.그외 기존의 웹을 통한 이미지 편집도 가능하니 한 플랫폼에서 이미지에 관한 모든걸 할 수 있어 너무 좋네요.요금은 기본 무료로 일부 테스트겸 사용, 체험은 가능하며,월 2.49 달러의 플러스, 월 9.99 달러의 프리미엄, 팀 요금제도 있습니다.요금제에 따라 AI 생성 횟수 제한, 템플릿 제공..

Gamma AI는 AI를 활용해 자동으로 PPT, 문서, 웹사이트 등을 생성하는 서비스입니다.생성방법은1. 회원가입2. 템플릿생성3. 어떤 종류의 결과물을 생성하지 선택4. 내용 입력5. AI 생성6. 생성된 결과에서 세부적으로 직접 수정하기7. 완료AI 생성까지 채 10분도 소요되지 않고 결과물도 나름 쓸만합니다.웹사이트에 경우 반응형을 지원하며, 다양한 템플릿도 지원합니다.생성된 웹사이트는 wix와 같이 도메인 연결하여 게시후 즉시 사용도 가능합니다.가격은 기본 무료로 제공하며, 간단한 테스트하기에 무리가 없습니다.유료는 월 8달러의 플러스, 15달러에 프로로 있습니다.요금제에 따라 생성 제한이 높거나, 세부적이고, 전문적인 기능이 더욱 제공됩니다.여러모로 활용도가 높은 AI 서비스입니다.

벌집모양 갤러리 디자인으로 사이트 꾸미기에 좋을거 같습니다.HTML과 CSS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML Responsive Hex Grid Image Layout ( - ) ▼▼▼▼ https://images.unsplash.com/photo-1507090960745-b32f65d3113a?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="" /> This is a title Some sample text about the article this hexagon leads..

웹에서 구현한 게임입니다.HTML, CSS, JS로 제작되었습니다.자세한 내용은 데모를 확인해 주시기 바랍니다.HTML ▲ ◀ ▼ ▶ 0 Game Over Your score: Retry Learn Three.js while building this game on YouTube Learn Three.js while building this game on YouTube CSS@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");body { margin: 0; display: flex; font-family: "Press Start 2P", cursive;} #control..

- 소개swipetoast는 기존 클릭 상호작용과의 호환성을 유지하면서도 스와이프 제스처를 구현하여 알림을 해제하는 가볍지만 강력한 jQuery 토스트 알림 플러그인입니다.스와이프 처리가 initSwipeHandler메서드에 의해 관리됩니다.이것은 표준 touchstart, touchmove, touchend(및 해당 마우스 이벤트 동등 항목)을 사용하여 사용자의 스와이프 제스처를 추적합니다. 스와이프한 거리를 계산하고 그에 따라 토스트의 를 조정합니다.transform. opacity스와이프 거리가 임계값(옵션을 통해 구성 가능)을 초과하면 swipeThreshold토스트가 닫힙니다. CSS 전환을 사용하여 매끄러운 애니메이션을 구현하고 브라우저의 기본 제공 기능을 활용한다는 점이 마음에 듭니다.- 라..

- 소개myOwnUIToaster는 웹페이지에서 사용자 정의 가능한 토스트와 같은 알림 메시지를 만드는 jQuery 플러그인입니다. 사용자의 브라우징 경험을 방해하지 않고 중요한 정보를 전달하는 데 도움이 됩니다. 기본적으로 이러한 토스트 메시지는 짧은 5초간 표시된 후 자연스럽게 사라지며, 종료되기까지 남은 시간을 시각적으로 나타내는 진행률 막대가 함께 표시됩니다. - 라이센스MIT- 사용 방법1. jQuery 라이브러리가 로드된 HTML 문서에 myOwnUIToaster CSS 및 JavaScript 파일을 추가합니다. 2. 새 myOwnUIToaster인스턴스를 만들고 다음 옵션을 전달하여 토스트의 모양과 동작을 구성합니다.3. 인스턴스화되면 show() 및 hide() 메서드를 사용하여 제어할 수..

클릭시 배경이 슬라이딩 됩니다.html 소스입니다.css 소스입니다.탭의 길이가 동일할때 사용하는 간단한 소스입니다.

탭메뉴 클릭시 탭배경이 애니메이션 효과로 활성화된 탭으로 이동합니다.탭메뉴의 레이어도 슬라이딩 됩니다.해당 사이트에서 전체 소스를 확인 하거나 다운로드 받으실수 있습니다.