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

네이버에서 제작한 MIT 라이센스의 차트 billboard.js 입니다.AreaChart 를 비록하여 타원형 차트, 라인형 차트, 도넛형 차트 등 다양한 차트를 제공해주고API 도 제공하여 다양한 분야에 쉽게 이용할 수 있습니다. billboard.js 로 제공되는 기본형 차트입니다. 색상으로 각각의 데이터를 확인할 수 있는 기본형 차트부터 아래에 소개해드릴 다양한 차트 구조를 확인할 수 있습니다. 위와같은 다양한 목차별 차트를 확인할 수 있습니다. 이용하는 방법은 본 사이트에서 다운로드 받을 수 있는 billboard.js 파일과 billboard.css billboard.min.js billboard.min.css insight.css insight.min.css 를 다운받아 상단에 선언한 이후 를 ..

내가 원하는 업종 및 스타일만 선택하고 상호명 및 광고카피 등을 입력하면 자동으로 로고를 만들어주는 홈페이지 입니다.자동으로 제작됨으로 내가 원하는 심벌이나 로고를 제작하진 않으나 비교적 퀄리티 높은 로고를 자동 생성하여 받아 볼 수 있습니다. 원하시는 업종을 선택합니다. 원하시는 로고 및 심벌 스타일을 선택합니다. (다중선택 가능) 상호명 및 부가 광고카피등을 서술합니다. 로고가 삽입될 콘텐츠를 선택하면 로고가 자동으로 생성됩니다. 원하시는 로고를 선택하면 편집화면으로 넘어가고 더욱 자세한 설정을 진행할 수 있습니다. 간단하게 로고를 생성할 수 있으나, 포토샵이나 이미지 편집툴과 같은 디테일한 수정은 지원되지 않습니다.

가장인기 있는 216종의 색상의 PNG이미지를 색상을 클릭하여 리스트를 확인하실 수 있습니다. 위 이미지에서 원하는 색상을 클릭하면 해당 색상과 관계있는 png 이미지 리스트가 출력됩니다. 이미지를 클릭하면 이미지에대한 상세내용을 확인할 수 있으며 download 버튼을 눌러 다운 받을수 있습니다. 이미지 다운로드시 이미지 라이센스에 유의하여 사용하실 바랍니다 ^^

드래그와 리사이즈를 이용해서 일일 스케쥴을 편집하기 위한 쉬운 jquery 플러그인 입니다. 데모 사이트 보다는 다운로드 받은 파일의 압축을 해제해서 나오는 demo/index.html 파일을 웹브라우저로 열었을때 확인을 해보는게 기능과 설명이 더 많습니다. 빈공간을 클릭해서 새로운 일정을 추가하는게 가능하네요. 기존에 일정을 클릭해서 이동시키거나, 일정의 끝을 클릭해서 늘리거나, 줄일수도 있습니다. 일정을 추가하거나 변경시마다 로그(콜백)를 이용해서 일정관리 등을 제작하기에 좀더 쉽게 활용이 가능해보이네요. 사용법이나, 지원되는 옵션은 데모를 확인하는 HTML문서내에서 설명을 잘 해주고 있습니다. 출처는https://www.jqueryscript.net/time-clock/Simple-Daily-Sch..

웹사이트에서 앱을 개발 할 수 있도록 기능을 구현해둔 MIT APP INVENTOR 입니다. http://appinventor.mit.edu/ 사이트로 접속을 해서 Create Apps! 메뉴로 접속후, 구글 계정으로 로그인하여 이용을 할 수 있습니다. 로그인후에 My Projects 메뉴에서 Start new project 메뉴를 클릭하여 새 프로젝트를 생성하고, 해당 프로젝트를 편집 하여 앱을 제작 할 수 있습니다. 하이브리드앱 개발이 필요하신분은 왼쪽 메뉴에서 User Interface 하단의 WebViewer 항목을 휴대폰으로 드래그 하여 설정을 하면 됩니다. 상단의 타이틀 영역을 숨기고 싶으신 경우에는 Screen1 (기본 스크린명) 선택을 하시고, TitleVisible 옵션을 꺼주시면 됩니다..

이메일을 1회용으로 이용이 가능한 서비스를 제공하는 웹사이트 입니다. 임의의값@mailinator.com 으로 이용이 가능 합니다. 갑자기 특정 이유로 임시로 이용할 이메일 계정이 필요한 경우 유용하게 활용이 가능한 서비스 입니다 https://www.mailinator.com/ 에서는 공개 이메일 체계로 이메일 주소의 앞부분(아이디)을 어떻게 입력을 하더라도, 모두 공개가 되어 아무나 볼 수 있게 됩니다. 급하게 메일 계정이 필요한 경우 happycgi@mailinator.com 으로 메일을 발송 한다면, https://www.mailinator.com/ 페이지에서 메일을 바로 확인을 할 수 있습니다. 사용방법은 간단합니다. ^^ happycgi@mailinator.com 으로 메일을 발송 했을 경우,..

JavaScript 를 이용하여 테이블이 여러 요소의 입력박스를 동적으로 생성하는 스크립트 입니다. 라이센스는 MIT 입니다. 압축 파일에 test.html 파일을 만들어서 첨부해 두었습니다. 해제하여 사용하시면 되구요. 조금 더 구성을 다르게 하고 싶거나 옵션 및 콜백을 구성하고 싶다면 아래의 링크를 통해 옵션을 커스텀 하시기 바랍니다. [ 옵션 및 콜백 확인하기 ] 1.CSS 와 기본 JS 호출하기 2.빈 테이블 생성 및 로드 버튼 생성. 3.AppendGrid 호출하기 ( 생성 옵션을 설정한다 생각하시면 편해요 ) 4.기존 데이터를 로딩할 경우 ... 사용하시면 됩니다.

Javascript 를 이용한 뷰어 입니다. 라이센스는 MIT 라이센스 입니다. 뷰어 호출시 옵션, api 메서드, 이벤트 헨들러 들을 다양하게 제공합니다. 설치는 아래와 같이 npm 으로 하시거나 include 로 하셔도 됩니다. 하지만 압축 파일에는 jquery.js 파일은 없으니 cdn 주소를 이용하시기 바랍니다. ^^ npm install imageviewer jqueryInclude files:

Get Waves는 랜덤한 형태의 물결 svg이미지를 생성해줍니다. svg이미지로 웹사이트에 사용할 수 있으며, 랜덤한 물결이미지가 필요한 디자인 작업 시 이미지 편집을 통하여 유용하게 사용할 수 있습니다. 위 버튼으로 물결 모양을 아래와 같이 변경할 수 있습니다. 위 버튼은 색상표시 위치를 나타내며 아래와 같이 변경됩니다. 원하는 색상으로 변경 할 수 있고 바로 옆 %를 조절하여 투명도도 적용 할 수 있습니다. 위 바를 조절하시면 굴곡 정도를 표시할 수 있습니다. 위 주사위 버튼을 클릭해보시면 굴곡이 자유롭게 변경되어 다양한 굴곡 형태를 확인하실 수 있습니다. 원하는 형태의 굴곡이 생성되면 화면 가운데 다운로드 버튼을 클릭하면 svg 이미지 코드가 아래와 같이 출력됩니다. 해당코드를 복사하시거나 svg..