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

DIV 박스를 화면에 표시하고, 드래그를 이용해서 크기조절, 회전이 가능한 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제하면 나오는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 화면에 표시되는 박스(DIV) 를 드래그를 이용해서 크기를 늘리거나, 회전하는 손잡이를 이용해서 박스를 회전시키거나, 박스를 끌어서 이동하는게 가능합니다. 크롬 개발자도구를 열어둔 뒤에, 박스의 크기, 위치를 변경할때와, 박스의 회전을 시켜 보면, 화면에 보이는 박스를 표현하기 위한 style(CSS) 태그의 속성들이 조절되는걸 확인해볼수 있습니다. 사용법에 대한 대략적인 설명은 유투브 링크를 슬쩍 보셔도 어렵지 않게 이해는 될것 같습니다.

CSS를 이용한 간단 로그인/회원 가입 페이지 입니다. 데모페이지에서 만들어진 화면을 확인하실 수 있으며 첨부파일내에 관련 HTML, CSS를 확인하실 수 있습니다^^

배경 및 배경효과로 사용하기 좋은 particles.js를 소개합니다. 사이트 우측에 있는 설정으로 js의 옵션을 이것저것 확인하며 설정해볼 수 있습니다. [파티클 종류] 1) Default 2) NASA 3) Bubble 4) Snow 5) Nyan Cat 마음에 드는 파티클 종류를 선택하고 CodePen 버튼을 클릭하면 해당하는 소스를 바로 확인해보실 수 있습니다. ^^

를 이용하여 원모양으로 돌아가는 텍스트를 만들어 보실수 있습니다. [svg 소스] [주요 svg 요소] 1) - 로 텍스트를 배치할 선을 만듭니다. 2) Sweet ~ Coding - 로 텍스트 요소를 감싸고 href 속성에 연결할 path id값을 넣는다. 3) - 으로 움직이는 애니메이션 효과를 준다. svg 요소는 인터넷 익스플로어 및 일부 브라우저에서 지원하지 않습니다. 해당 소스를 활용하여 로딩화면에 돌아가는 이미지 등에 사용 해보실수 있을거 같습니다. ^^

Css를 이용한 체크박스 스위치 디자인입니다. 압축파일내에 html,css 파일이 포합되어 있습니다. css 내용중 var부분은 variable 변수입니다. css변수는 어떠한 기능인지 아래의 사이트에서 간단하게 확인이 가능합니다. https://fresh-mint.tistory.com/entry/css-variable-%EB%B3%80%EC%88%98-%EC%B4%9D-%EC%A0%95%EB%A6%AC 디자인시 유용하게 사용하시길 바랍니다 ^^

플러그인 소개 1줄의 스크립트와 CSS 로 2개의 이미지를 슬라이더로 비교할 수 있도록 구성된 플러그인 입니다. 사용 방법 1. CSS 를 호출하세요. 파일을 압축해제하면 CSS 폴더에 2개의 CSS 파일이 있습니다. 2. 컨테이너를 구성하세요. 실행 결과

최근 많은 사이트에서 적용을 하고 있는 구글 크롬 브라우저에서 웹푸시 알림 기능을 구현 할 수 있도록 안내 하는 홈페이지 입니다. https://developers.google.com/web/fundamentals/push-notifications 크롬에서 해당 페이지로 접속을 하여 한글로 번역을 해서 열람을 하면 이해가 쉽습니다.

카카오싱크는 카카오 로그인 API와는 달리, 약관동의 기능을 통해 손쉽게 회원가입을 할 수 있는 구조로 제작된 OPEN API 입니다. https://developers.kakao.com/docs/latest/ko/kakaosync/common 페이지를 통해 자세한 기능 설명 및 설정 및 설치방법을 확인 할 수 있습니다. 해당 API를 통한 회원가입 과정을 통해 자연스럽게 채널 친구 확보 및 타깃 메시지 발송, 자동로그인 기능 또한 이용 할 수 있습니다. 카카오싱크에 대한 자세한 소개는 https://business.kakao.com/info/kakaosync/ 페이지에서 확인이 가능 합니다.

다운로드 받은 파일의 압축을 해제한 후 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 위와 같은 화면이 나오는데, 공의 개수와 최대 숫자, 보너스 공의 개수, 보너스 번호 등등을 임의로 지정을 한 뒤, GENERATE NUMBERS 버튼을 누르면 버튼 아래의 흰 공간에 공들이 표시가 되고, 공의 중간에 표시되는 번호들이 뱅글뱅글 돌다가 무작위로 번호가 지정이 됩니다. 로또 복권 번호 랜덤 생성기 이긴 하지만, 공의 숫자가 뱅뱅 도는 효과와, 공들의 번호가 중복이 되지 않는것, 공의 개수 및 숫자의 범위 조절 등의 몇가지 옵션의 조절이 가능한 걸 이용을 하면, 로또 복권 번호 생성기 라고는 하지만, 비슷한 다른 용도로도 쓰일 수도 있을것 같네요.

스크린샷을 넣고 원하는 사이즈 / 목업 색상 등을 선택하여 휴대폰 목업 이미지를 간편하게 생성할수 있는 사이트 입니다. 휴대폰 목업에 스크린샷 이미지를 쉽게 생성하고 싶을때 사용하시면 좋은 사이트 입니다.