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

원하시는 이미지를 업로드하면 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 라이센스 입니다. ​

다운로드 받은 압축파일을 해제한후, index.html 파일을 웹브라우저로 열어서 보면 샘플을 확인하는게 가능합니다. 위 그림과 같은 탭메뉴를 화면에 표시해줍니다. 웹페이지에 탭메뉴를 구현해 둔 자바스크립트와, HTML소스코드는 예제가 매우 많지만, 탭메뉴의 개수, 적용되는 효과, 작동하는 이벤트 등의 이유로 다소 이용하기에 복잡한게 많습니다. 이 프로그램은 비교적 간단하게 사용할 수가 있어서 유용할것 같네요. 1. 위와 같이 ul, li 태그로 탭메뉴 부분을 만들고, 각 탭에 연결되는 컨텐츠를 코딩합니다. 2. jquery 와 tabs.js 가 로딩되도록 위 태그를 넣어줍니다. ​ ​3. ul 태그에 지정한 id 를 이용해서 위와 같은 스크립트로 탭메뉴를 활성화 시킬수 있습니다. 심플한 만큼 다양한 기..

css 로 구현되는 마우스 오버시 메뉴 애니메이션 효과입니다.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 star-rating-svg.css 파일을 불러옵니다. 2. 별점을 노출할 빈 DIV 객체에 jq-stars 클래스를 걸어줍니다. 3. 파일 상단에 JQuery 라이브러리와 jquery.star-rating-svg.js 파일 링크를 걸어줍니다. 4. 별점을 노출할 빈 DIV 객체에 플러그인을 호출합니다. 5. 플러그인 상세 옵션 및 Method, Event는 사이트 링크를 참고하세요. - 작동 예제

- 라이센스 MIT - 사용 방법 1. 파일 상단에 JQuery 라이브러리와 slectrange.js 파일 링크를 걸어줍니다. 2. 옵션이 없는 셀렉트박스 객체를 추가합니다. 3. 각 객체에 min, max 값을 조절하여 selectRange 플러그인을 호출합니다. - 작동 예제 ​ ​ ​