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

css로 다양한 효과를 준 여러가지 on/off 스위치 스타일을 확인해보세요. 본 사이트에서는 스크립트 소스없이 css만을 이용하여 다양한 효과를 준 on/off 스위치를 볼 수 있습니다. 현재 총 18가지의 스타일이 있으며, 사이트 상단에서 사용된 html, css소스를 확인하실 수 있습니다. ​ ​각 버튼 html 소스는 위와 같이 구성되어 있고, id값 button-1 ~ button-18 로 구분되고 있습니다. 확인을 원하시는 스타일의 id값으로 css소스를 검색해보시면 사용된 css를 쉽게 찾아보실 수 있사오니 소스 확인하시고 on/off 스위치에 다양한 효과를 적용해보세요 ^^ ​ ​ ​

Dot Navigation Styles에서는 다양한 효과를 지닌 14가지의 도트네비게이션 스타일을 확인하실 수 있습니다. 사이트에서 파일을 다운 받으시면 사용된 html, css, js 소스를 확인하실 수 있습니다. 도트 네비게이션 기본 소스는 위와 같이 구성되어 있으며 네비게이션 스타일 명칭인 "dotstyle-fillup" 클래스를 각 명칭에 맞게 수정하므로 스타일을 변경할수 있습니다. dotstyle-fillup dotstyle-scaleup dotstyle-stroke dotstyle-fillin dotstyle-circlegrow dotstyle-dotstroke dotstyle-drawcircle dotstyle-smalldotstroke dotstyle-puff dotstyle-flip do..

간혹 안전한 비밀번호를 만들고 싶지만, 마땅히 생각나지 않으며 어떻게 만들어야 안전한지 판단이 망설여 질때가 있습니다. 그럴때 이 사이트를 방문하여 랜덤으로 만들어진 비밀번호를 참고해 보셔도 좋겠습니다. 비밀번호 생성에 다양한 옵션을 제공하며 ​랜덤 생성된 비밀번호의 길이와 옵션에 조합에 따라 해독에 얼만큼의 시간이 걸릴지도 나타납니다. 안전한 비밀번호를 만들고 싶을때 방문하여 참고해 보시기 바랍니다. ​ ​ ​

우리에게 친숙한 초콜릿인 가나초코릿에 사용된 그 폰트 입니다. 개인 및 기업 사용자를 포함한 모든 사용자에게 무료로 사용할수 있습니다. 위의 표를 참고하여 사용하시면 되겠습니다. 단, 유료로 해당 폰트를 양도 하거나, 판매 행위 또는 로고 등에 사용은 금지하니 참고하시기 바랍니다. ​ ​ ​

원하시는 이미지를 업로드하면 3D 목업형태의 모바일 기기에 업로드한 이미지가 출력되며, 업로드된 이미지를 이용하여 여러 배치 및 위치별 모바일 화면을 확인할 수 있는 툴입니다. 홈페이지 접속후 "start the generator" 를 클릭하면 이미지 편집 및 목업이미지를 확인할 수 있습니다. 업로드 버튼을 클릭하여 반영하고자 하는 사진이미지를 선택합니다. 일반적으로 로고나 index 화면등의 이미지를 등록하시면 적합합니다. 하단의 툴 설정부분으로 배경색상 및 각종 컬러 등의 설정이 가능합니다. 회전방향을 설정하여 아래와 같은 눕혀있는 형태의 목업 디스플레이도 가능합니다. ​ ​

반응형 기반의 회전식 슬라이드 및 터치식 슬라이드 등 다양한 효과의 슬라이드 jquery 플러그인 소스입니다. 터치 앤 드래그 및 최신 브라우저에 호환성이 높은 소스입니다. 예시된 샘플 슬라이드 효과는 대략 10여종이며, 기본적인 슬라이드 형식은 아래와 같습니다. 최근 홈페이지에 자주 이용되는 마우스 휠 슬라이드 효과가 있어 해당 소스를 이용한 효과를 참고하시기 바랍니다. https://owlcarousel2.github.io/OwlCarousel2/demos/mousewheel.html 우선 기본베이스가 되는 슬라이드 소스를 html 에 삽입후 ​ 라는 소스를 적용하여 마우스 휠 소스가 적용되도록 합니다. 혹은 다운로드 받은 소스에서 docs > demos 폴더내에 mousewheel.html 파일을 ..

css 만으로 구현되어 있습니다. 팝업출력시 스케일이 변경되며 펼쳐지는 효과가 있습니다 마찬가지로 팝업을 닫을때도 스케일이 변경되며 사라집니다.

각 카테고리별로 분류가 잘되어 있으며 템플릿을 구매 혹은 무료자료도 있습니다. 디자인 참고시 도움이 될만한 사이트입니다. ​ ​ ​

마우스를 오버하면 특정 레이어에 이미지를 확대하는 기능입니다. jQuery Plugin 입니다. 라이센스는 MIT 라이센스 입니다. 기능이 조금 독특하다 보니 라이브러리가 좀 필요합니다. 코드 구성은 아래와 같이 되어 있습니다. 압축된 파일을 해제하면 index.html 파일을 구동하면 바로 기능 확인 및 사용이 가능 합니다. 기능은 독특하지만 안타깝게도 api 를 제공하지 않습니다. 그래서 어떤 옵션이 있는지 체크가 안되구요. 있는 그대로 사용하시는게 편합니다.

popModal은 jQuery 플러그인을 이용하여 ​툴팁, 제목, 모달, 대화상자, 확인 팝업 모달을 만들수 있습니다 1.jQuery 가 필요 합니다. 2.css 와 popModal.min.js 파일을 호출하세요. 3.버튼을 생성하여 모달 클릭할 준비하세요. 4.버튼을 클릭하면 생성될 모달을 만들어주세요. 위의 방법이 기본적인 모달 생성 방법 입니다. 다양한 옵션이 존재 하네요. 유의사항 popModal 을 이용하여 동적모달을 생성할 수 있습니다. 하지만 로컬 형태에서는 작동하지 않으니 웹에서 테스트 해 보셔야 합니다. 그리고 라이센스는 MIT 라이센스 입니다. ​