일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- #CSS
- 게시판
- #happycgi
- CGIMALL
- #솔루션
- 사이트제작
- 해피CGI
- #뉴스
- #해피CGI
- jquery
- #jQuery
- #cgimall
- #동영상
- 웹솔루션
- javascript
- #업종별
- 홈페이지
- 해피씨지아이
- #image
- #웹솔루션
- CSS
- php
- #홈페이지제작
- #홈페이지
- 솔루션
- 쇼핑몰
- happycgi
- #이미지
- 홈페이지제작
- #쇼핑몰
- Today
- Total
목록웹프로그램밍 자료실 (2655)
웹솔루션개발 25년 노하우! 해피CGI의 모든것
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/k9n04/btrv0PG8Njw/VROJ54XyVGJ1tisIfiKKgk/img.jpg)
css 만으로 구현되어 이미지 작업 없이 색상, 크기 등을 쉽게 변경이 가능합니다. 첨부 파일을 다운로드 받아 소스 확인이 가능합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b5eca3/btrvOfAJIBY/FReyEiSvguj58Lw3jbvCA0/img.jpg)
다운로드 받은 파일의 압축을 해제한뒤 demo/demo.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹페이지에 표시된 요소들을 드래그 앤 드랍 하는 프로그램은 많지만, 많은 프로그램이 jquery ui 를 이용해야만 작동이 되는데, 이 프로그램은 jquery ui 가 없이도 작동하는 장점이 있습니다. 버튼을 끌어다 정해진 위치에 가져다 놓을수도 있으며, 아래 그림 처럼 아무 위치에나 배치시키는 예제도 있습니다. 드래그 앤 드랍을 이용해서 일반적인 리스트의 순서를 조절한다거나, 리스트를 그룹화 시킨다거나 하는 용도로도 사용이 가능하네요. 사용하는 방법은 아래와 같습니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/lNmCV/btrvDhL8ecj/Fp2vJzA3vK8yXBo5lLM2a0/img.jpg)
Kakao 에서 제공하는 썸네일 생성 OPEN API 입니다. 썸네일 생성은 Kakao 에서 판단하여 중요한 부분을 중심으로 썸네일을 생성이 됩니다. 해당 API 데모 페이지는 아래 페이지에는 확인이 가능 합니다. https://vision-api.kakao.com/#thumbnail_crop 해당 API의 사용법은 아래 페이지에서 확인이 가능 합니다. https://developers.kakao.com/docs/latest/ko/vision/dev-guide#create-thumbnail
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/LV4su/btrvDPUnHh0/W8lBd0UNL3kRJAN4A5Jns1/img.jpg)
상품을 돋보이게 해주는 디자인의 이미지 슬라이드이며, swiper 슬라이드로 만들어졌습니다. 슬라이드를 하게되면 글씨와 상품 배경이 모두 변경되고 각각의 애니메이션 효과를 확인해보실 수 있습니다. 반응형으로 좁은화면에서는 위처럼 구조가 변경됩니다. 홈페이지에서 소스를 확인해보세요 ^^
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/yY9cf/btrvl7wkshd/mdTGBxV7fRGMnzDd7Rpky1/img.jpg)
Regenerate 버튼을 클릭하면 배경이미지의 색상과 물결모양이 랜덤으로 변경됩니다. 해당 배경이미지는 SVG 이미지로 Copy SVG 이미지를 클릭시 마음에 든 물결 배경의 SVG 소스를 복사하여 사용해보실 수 있습니다. 홈페이지에서 해당 배경 생성기의 HTML, CSS, JS 소스도 확인해보실 수 있습니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cGiZWG/btrvlzxGixD/Dk0OlVHfjHa7NKnlJWriB1/img.jpg)
다운로드 받은 파일의 압축을 해제한 뒤 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 웹브라우저에서 열어보면 아래 그림과 같은 여러종류의 이모지들을 화면에 보여주고, 클릭을 해볼수 있는 화면이 표시가 됩니다. 크롬 브라우저의 F12 개발자도구를 열어서 console 탭을 보면 선택한 이모지를 콘솔을 통해서 확인이 가능합니다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/LfopS/btru2viwkci/LAwq8SIvAkPrGdV9d2VYA0/img.png)
CMS명 : zigger 2.2 zigger는 회원관리, 게시판, 배너관리, 팝업관리 등 웹사이트 구축을 위해 강력한 기능을 제공하는 CMS입니다. 공식 사이트에서 배포되고 있으며, 기능이 지속적으로 업데이트 되고 있습니다. 다운로드 후 설치시 기본적으로 반응형웹이 적용된 홈페이지가 구축되며, 자체 Framework (VC모델) 로 개발되어 있어 공식사이트에서 제공하고 있는 가이드 문서를 참고하여 어렵지 않게 기능을 개발하여 확장할 수 있습니다. 과거 ph-core라는 명칭으로 1.0 버전이 배포되다가 최근 2.2가 새롭게 개발되어 배포가 시작되어 레이아웃 테마가 다양하지는 않지만 VC모델로 레이아웃 HTML 파일이 분리되어 있어 어렵지 않게 사이트 디자인 변경이 가능합니다. 아래는 zigger 공식 사..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/egW5j5/btruXbdykck/nuN5YH9eccyhbxo8JG6Fzk/img.jpg)
간단하게 지정된 색상의 유사색을 참고할때 좋은 사이트입니다. 그리고 아래의 사이트는 그라디언트 컬러를 참고사이트입니다. UI GRARIDENTS https://uigradients.com/#PlayingwithReds 그리고 아래의 사이트는 그라디언트 컬러를 참고사이트입니다. 사이트 제작에 많은 도움이 되시길 바랍니다^^
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cnmrV6/btruKkpa7Rf/LH8bHXZf16SPdqeTP3JU1K/img.jpg)
- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 autoHeight.js 파일을 로드합니다. 2. 대상 iframe 요소에 함수를 호출하고 높이를 해당 콘텐츠로 설정합니다. 3. 대상의 iframe 요소의 높이를 특정 간격마다 동적으로 변경하기 위한 기능도 제공합니다. - 작동 예제 (캡쳐 화면입니다. 데모 사이트를 참고하세요.)
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/btzKUb/btruyM0dEqD/iNpKdU6IVk69AqLsXIF8t1/img.jpg)
- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 jdSlider 라이브러리, css 파일을 로드합니다. 2. 필요에 따라 아이콘 표시를 위해 Font Awesome CSS 파일을 로드합니다. 3. 슬라이드쇼에 표시할 콘텐츠와 페이징 등 객체들을 코딩합니다. 4. jdSlider 플러그인을 호출합니다. 5. 반응형으로도 구성할 수 있습니다. 6. 추가적인 옵션과 이벤트 메소드는 사이트를 참고하세요. - 작동 예제