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

- 라이센스 MIT - 사용 방법 1. 파일 상단에 tagify.css 파일 링크를 걸어줍니다. 2. Jquery 버전 사용시 jQuery 라이브러리 파일 링크와 함께 jQuery.tagify.js 파일을 링크해줍니다. 2-1. 만약 순수한 Javascript만 사용하고 싶다면 tagify.js 파일을 링크해줍니다. 3. 태그를 입력할 INPUT 태그를 추가합니다. 4. tagify 스크립트를 실행합니다. jQuery 버전과 순수 Javascript 버전 구분은 주석을 참고하세요. 5. 태그의 중복 입력을 허용하려면 아래와 같이 duplicates 옵션에 false를 입력하세요. 6. 세부 옵션과 API 메소드, 이벤트 등은 홈페이지를 참고하세요. - 작동 예제

다운로드 받은 파일의 압축을 해제하면 생기는 index.html 파일을 웹브라우저로 열어보면 확인이 가능합니다. 이미지 파일로 된 지도위에 위 그림과 같이 특정 위치에 마크를 표시해주고, 마크를 클릭하면 미리 준비해둔 제목, 내용 을 지도위에 보여주는 작은 레이어가 열리는 스크립트의 예제입니다. index.html 파일의 소스코드를 열어서 보면 이미지로 제작된 지도를 웹페이지에 표시하기 위해서 사용된 스크립트를 확인이 가능합니다. 별다른 기능은 없으며, json 포맷의 데이터를 이용해서 지도 위의 마커의 X좌표, Y좌표, 아이콘, 클릭했을때 화면에 표시되는 레이어내의 제목, 내용 등의 문구를 지정할수 있겠습니다. X,Y좌표만 살짝 변경을 해서 웹페이지를 새로고침 해보니 지도 위에 찍히던 마커가 이동을 하..

html Brand Home page a page b page c page d css body background: #eee min-height: 3000px padding: 0 margin: 0 font-family: 'Open Sans', sans-serif .container width: 80% margin: 0 auto clear: both a display: inline-block color: #333 text-decoration: none nav background: #fff height: 80px line-height: 80px box-shadow: 1px 1px 1px rgba(0, 0,0, 0.2) position: fixed top: 0 left: 0 width: 100% z-index..

네이버 오픈메인은 간단한 스크립트를 복사해서 홈페이지에 붙이는 것 만으로도 쉽게 개발 할 수 있습니다. 네이버 오픈메인 추가 버튼을 배치를 해두는 경우, 사용자들이 해당 사이트를 쉽게 네이버 메인에 추가 할 수 있게 해주는 플러그인 입니다. 단 네이버앱 메인은 가로 swipe는 정상 구동이 되지 않을수도 있다고 합니다. https://developers.naver.com/docs/openmain/#%EB%84%A4%EC%9D%B4%EB%B2%84-%EC%98%A4%ED%94%88%EB%A9%94%EC%9D%B8 오픈메인 버튼을 장착 하는 경우 아래와 같이 사용자들이 네이버앱 메인에 추가를 할 수 있게 됩니다. https://developers.naver.com/docs/openmain/#1--%EC%98..

네이버에서 OpenAPI로 제공하는 통합 검색어 트렌드 조회 API 입니다. 해당 API는 주제어로 묶은 여러개의 검색어들을 전달하여, 네이버 통합검색에서 검색 추이 데이터를 받아 볼 수 있습니다. 하루 1000회까지 조회가 가능 합니다. 비로그인 방식으로 제공되는 해당 API를 이용하기 위해서는 아래 API 공통 가이드를 확인하고, 애플리케이션 등록 및 키 발급을 받아 사용이 가능 합니다. https://developers.naver.com/docs/common/openapiguide/ 키 발급이 완료 되었다면 아래 페이지에서 API 호출 방법과 응답받은 Json 소스를 확인후 프로그램 작업을 진행 하시면 됩니다. https://developers.naver.com/docs/datalab/search/..

더노운프로젝트는 전세계의 그래픽디자이너들이 픽토그램, 아이콘, 심볼 등을 업로드하는 사이트입니다. 사용자에게 무료로 제공하는 사이트이지만 아이콘을 판매하시면 문제가 됩니다. 더노운프로젝트는 해외사이트이므로 검색할때 영어로 해야하고 회원가입을 해야하는 번거로움이 있지만 검색시 방대한 자료가 나온다는 장점이 있습니다. 원하는 이미지를 선택하셔서 'Get this icon' 버튼을 클릭 후, 'Basic Download'에 체크하셔서 'Continue' 버튼을 클릭합니다. 마지막으로 사용하실 계획에 체크를 하시고 'Choose Use' 버튼을 클릭하신 후, PNG/SVG 중 선택하여 이미지를 다운로드 받으시면 됩니다.

웹페이지에 키보드를 표시해주고, 키보드를 이용해서 입력폼에 글자를 입력받을수 있는 스크립트 입니다. 다운로드 받은 압축파일의 압축을 해제한 후, examples/index.htm examples/numpad.html 위 파일을 웹브라우저로 열어보면 데모확인이 가능합니다. 데모사이트에서도 쉽게 확인이 가능합니다. 좌측 아래의 123키를 이용해서 숫자와, 특수문자를 입력받는 키보드로 바꾸는게 가능합니다. 숫자패드 우측의 키보드 모양의 키를 이용해서, 다른 나라의 키보드로 변경할수는 있습니다. 하지만, 지원되는 국가가 그리 많지는 않네요 위 코드에서 확인이 되듯, azeri, english, german, russian, numeric, number_only, symbolic 등등 몇가지를 선택할수가 있습니다..

cssgenerators는 클릭만으로 디자인을 조절하여 버튼을 생성해주는 사이트입니다. 효과와 옵션을 조절하면 설정한 버튼 모양을 바로 확인할 수 있습니다. 위와 같이 css 소스를 무료로 제공하기 때문에 유용하게 사용이 가능합니다. 아래의 css 태그 압축하기를 클릭하면 가로 일렬로 정돈이 되어 더욱 편리하게 사용할 수 있습니다. 하단쪽을 살펴보시면 더 많은 버튼 예제가 있어서 다양하게 이용하실 수 있습니다.

* jQuery Hero Slider Plugin 슬라이드 전환시 효과가 재미있는 jQuery 플러그인 슬라이드시의 움직임은 data-transform = "scale" 로 data-transform = "rotate" 를 조합 해 지정할 형태로되어있어 내비게이션 및 자동 재생의 유무,속도 조정 등의 옵션도 갖추어져 있습니다. * License MIT License * 이용방법 상단에 css 파일을 호출합니다 아래와 같이 마크업 영역안에 배너를 삽입합니다 그리고 하단에 js 파일을 불러옵니다 아래와 같은 옵션으로 슬라이드 방향을 결정할 수 도 있습니다 옵션 항목은 아래와 같습니다 1) activate : 클래스를 실행 bp-hs_inner__item하고 추가하여 is-active클래스를 표시 , 기본값으..

* Draggable Dual-View Slideshow 드래그 가능한 슬라이드 쇼로 전체 화면보기에서 관련 콘텐츠 영역을 볼 수 있습니다. 전체 화면 스크롤 웹 사이트를 만들 수 있으며 사이트 섹션에 가로 슬라이더를 추가 할 수도 있습니다. * License GPL License * 사용방법 첨부된 다운받아 웹디렉터리 안에 업로드한후 압축파일을 해제합니다 아래와 같은 구조로 코드를 작성해줍니다 기본 제공되는 css,js 파일을 호출하고 slideshow 영역안에 가로로 드래그해서 보여질 내용들의 html 및 css코드를 작성합니다 페이지 하단과 상단으로 이동할 수 있는 영역에 대한 html,css 코드를 추가합니다 드래그 및 슬라이드가 작동될 수 있도록 js 호출 및 script 를 작성해줍니다 기본 ..