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

dragSort.js는사용자가 드래그 앤 드롭을 통해특정 컨테이너의 항목을 재정렬할 수 있도록 하는사용하기 쉬운 jQuery 플러그인입니다. HTML 목록뿐만 아니라 플러그인은 테이블, DIV, 설명 목록, 양식 필드 및 상상할 수 있는 모든 것과 같은 거의 모든 HTML 요소를 지원합니다.다운로드 받은 파일의 압축을 해제후index.html 파일을 웹브라우저에서 열어보면 확인이 가능합니다.여러 목록 간에 항목을 드래그할 수 있습니다.사용자 지정 자리 표시자 템플릿입니다.요소를 무시할 수 있습니다.항목을 목록 밖으로 끌 때 페이지/컨테이너를 자동으로 스크롤합니다. 사용방법은 아래와 같습니다.

Start designing for free 버튼을 클릭하시면 생성 페이지로 이동합니다.다양한 SVG 모양과 배경을 만들수 있는 웹사이트 입니다.색상이나 사이즈등 커스터마이징을 웹사이트에서 쉽게 할 수 있습니다.생성된 소스는 SVG 또는 PNG 형태로 무료로 다운로드 받을 수 있습니다.

두가지 형태와 다양한 에니메이션 효과가 있는 토글 버튼 소스입니다.css 만으로 구현되어 있기에 커스터마이징을 쉽게 할 수 있습니다.모양은 동일해도 에니메이션에 차이가 있습니다.해당 사이트에서 버튼별로 css 소스를 확인할 수 있습니다.첨부된 파일을 다운로드 받으셔서 직접 확인도 가능합니다.

Freebiesbug는 웹 디자인과 모바일 앱 디자인을 위한 무료 리소스 사이트입니다. 이 사이트에서는 PSD 파일, Sketch 파일, HTML/CSS 템플릿 등 다양한 리소스를 무료로 다운로드할 수 있습니다. 또한, 매주 업데이트되는 새로운 리소스도 제공되어 사용자들에게 다양한 선택지를 제공합니다.

Sketch App Sources는 Sketch 앱을 사용하는 디자이너들을 위한 무료 리소스 사이트입니다. 이 사이트에서는 아이콘, UI 키트, 템플릿 등 다양한 리소스를 무료로 다운로드할 수 있습니다. 또한, Sketch 앱에서 바로 사용할 수 있는 파일 형식으로 제공되어 사용이 편리합니다.

마우스 따라 별이 생기는 효과입니다.코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다. HTML  Move your mouse aroundCSS @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100&display=swap');.star {  transform-style: preserve-3d;  width: 1px;  height: 1px;  position: absolute;  color: red;}.star:before {  position: absolute;  content: '\2726';  color: inherit;  inset: 0;  //box-shadow: 0 0 1em .5em #a3c2;  //filt..

HTML과 CSS로 제작된 말풍선 디자인 입니다.코드 및 데모는 데모링크를 통해서 확인하실 수 있습니다.HTML  CSS:root { --c1: #fbfdfa; --c2: #cbdce5; } body { margin: 0; padding: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(45deg, #ccd9e2, #eaedf2);} body * { box-sizing: border-box;} .wrapper { width: 90vmin; height: 90vmin; display: flex;..

바코드의 경우 바코드 타입, 바의 가로 크기, 높이, 여백, 배경색, 라인색상, 텍스트 위치, 폰트, 폰트 크기, 텍스트 여백을 변경할 수 있으며 바코드 아래 출력되는 글자를 없앨 수 있습니다.먼저 바코드 생성 방법입니다.1. 사이트 접속 후 저장버튼 밑에 바코드 타입을 선택2. 바의 가로 크기, 높이, 등 원하시는 모양으로 선택3. 저장 버튼을 클릭하면 barcode.png로 저장이 됩니다.QR 코드의 경우 URL을 입력하시면 해당 URL로 이동이 가능하며 QR코드의 배경색, 색상, 크기를 변경할 수 있습니다.QR코드 생성 방법입니다.1. 상단 탭에서 QR코드로 변경2. URL, 배경색, 색상, 사이즈를 입력3. 저장 버튼을 클릭하면 qrcode.png로 저장이 됩니다.모바일 마케팅, 간판, 브로슈어 ..

원본 부분에 HTML, CSS, JS 코딩한 부분을 입력해줍니다.입력 후 변환 버튼을 클릭해줍니다.변환 버튼을 클릭하면 압축한 코드들이 나옵니다.압축된 코드를 복사하여 교체해주시면 되겠습니다.CSS, JS 도 동일한 방법으로 코드를 압축할 수 있습니다.[CSS][JS]html, js, css 코드를 압축된 코드로 변환하면 웹페이지의 로딩 거리를 줄이고, 서버의 부하를 감소시키며, 웹사이트의 전체적인 효율성을 높일 수 있습니다.

간단하게 img 태그에 src 에 주소만 넣어도 QR 태그를 만들 수 있는 API 입니다.형태는 위와 같습니다.투명 여부 , 사이즈 , png 인지? svg 인지?그리고 가고자 하는 url 을 입력 하면 됩니다.위와 같이 입력하면 픽셀 사이즈 4 크기의 PNG 형태의 이미지로 qrtag.net 으로 이동하는 QR 코드를 만들 수 있습니다.총 API 요청 수는 애플리케이션당 10분당 1,000개 요청으로 제한되는 점을 참고 부탁드립니다.