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

이메일을 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..

파일업로드와 몇번의 클릭만으로 간단하게 애니메이션 gif파일을 만들 수 있는 사이트입니다. 사이트에 접속하셔서 상단메뉴중 두번째 메뉴인 'GIF Maker'를 클릭합니다. 1번 '파일 선택' 버튼을 클릭하여 이미지를 업로드 후, 2번 'Upload and make a GIF!' 버튼을 클릭합니다. 이미지 업로드 후 gif파일 만들기 버튼을 클릭하면 gif 파일에 대한 설정을 할 수 있습니다. Delay time 란은 이미지가 몇초만에 움직일 것인지를 설정할 수 있고 Loop count 란은 몇번 반복할 것인지를 설정할 수 있습니다. 해당 란을 비워두면 영원히 반복됩니다. 아래의 'Make a GIF!' 파일을 클릭하시면 완성된 gif 파일을 확인하실 수 있습니다. crop, resize, rotate 등..

다양한 이미지 효과를 해당 데모페이지에서 라디오 버튼을 클릭하여 확인하실 수 있습니다. 라디오버튼 이미지 효과 밑 아래에 css코드가 노출되고 있으니 복사하여 적용하여 사용할 수 있습니다.데모링크를 클릭하면 샘플 페이지를 확인하실 수 있습니다. 익스플로러 상위버전, 크롬, 파폭등 최신 브라우저에서만 작동이되니 참고하시길 바랍니다 ^^

css grid를 이용하여 손쉽게 웹사이트 grid latout 을 잡을 수 있습니다. 샘플 소스에 있는 grid-template-columns: 100px 500px; grid-template-rows: 200px 100px 400px; 와 같이 grid-template-columns, grid-template-rows 프로퍼티를 이용하여 행과 열을 정의할 수 있습니다. 행과 열은 픽셀 단위로 고정 그리드도 만들수 있고, fr 단위 혹은 %단위로 가변 크기를 줘서 유연한 그리드도 만들 수 있습니다.

마우스 스크롤을 하단으로 이동할때마다 내용이 출력되는 애니메이션 JQuery ScrollTrigger 입니다. CSS3를 활용한 애니메이션으로 다양한 프레임에서도 적용이 가능합니다. 이미지 출력 및 원페이지형 홈페이지 제작에도 유용합니다. 가로모드도 지원하며, 그 외 다양한 옵션을 제공하여 편리성이 높습니다.

css만으로 간단하게 글자 타이핑 효과를 낼 수 있는 소스입니다. 다소 조금 부자연스러운 느낌이 나기도 하지만 간단하게 글자 타이핑 효과를 내기에는 유용할 듯 합니다. 첨부된 index.html 파일을 통해 자세하게 해당 효과를 확인하실 수 있습니다. ^^