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

주 용도는 웹페이지에 표시되는 작은이미지 를 클릭하면light box 를 이용해서 큰 이미지를 보여주는 스크립트입니다. 화면 가운데에 열려진 light box에 마우스를 오버하면, 이전 이미지, 다음 이미지를 선택할수 있는 화살표가 표시가 되네요. 기본 스킨 외에도 아래의 그림과 같이 몇가지 테마도 같이 제공이 되네요. 유투브나 비메오에서 제공되는 동영상도 소스코드를 크게 손을 안봐도, light box 에서 재생되도록 할수가 있습니다. light box 에 줄수 있는 옵션들도 아래 처럼 몇가지가 있네요. 뒷 배경의 투명도와, 애니메이션의 작동여부와 에니메이션 작동에 소요되는 시간 등등을 조절할수가 있겠습니다. 이미지나, 동영상, 그외 HTML을 직접 짜서 lightbox 에 손쉽게 표시해야 하는 상황에..

국토교통부에서 제공하는 OPEN API 입니다. 제공되는 항목은 아래와 같습니다. 1. 열차정보 서비스 2. 지하철정보 서비스 3. 국내항공 운항정보 서비스 4. 국내선박 운항정보 서비스 5. 서외버스정보 서비스 6. 고속버스정보 서비스 7. 도착정보조회 서비스 8. 버스노선 정보조회 서비스 9. 버스정류소 정보조회 서비스 10. 버스위치 정보조회 서비스 위 10가지의 정보들은 https://www.data.go.kr/dataset/15000759/openapi.do 페이지에 접근하면 다운로드 가능한 문서를 통해 자세한 내용 확인이 가능 합니다. 해당 문서에는 서비스 사용을 하기 위한 Key 발급 방급도 같이 설명이 되어 있습니다.

Pogo Slider 는 여러가지 액션들을 제공하는 이미지 슬라이드 기능 입니다.Jquery 기반으로 제작이 되어 있습니다. 아래 페이지에서 다양한 액션에 대한 데모 슬라이더들을 확인이 가능 합니다. http://fluice.com/pogo-slider/#demos 해당 슬라이더의 사용 방법은 http://fluice.com/pogo-slider/#usage 페이지에서 확인을 하실수가 있는데, 첨부된 압축파일을 풀어보시면 demos 폴더내에 샘플 소스들을 확인도 가능 합니다. 사용법 아래쪽에서는 제공되는 옵션들도 확인이 가능 합니다.

전세계의 다양한 기업의 로고, 국기를 SVG, PNG 파일로 쉽게 다운받을 수 있는 사이트 Instant Logo Search를 소개합니다. 별도의 회원가입 없이 원하는 로고, 국기를 쉽게 다운받을 수 있으며, 국내 큰 기업인 카카오, 삼성, gs 등의 로고도 검색 되고 있습니다. 이미지 아래의 SVG, PNG를 클릭하여 각각 다운받을 수 있습니다. 또한 "Add to Bucket" 을 클릭하면 여러개의 로고, 국기 이미지들을 한번에 압축파일로 다운받을 수도 있습니다. 세계 유명 기업들의 고품질 로고 또는 국기 이미지를 찾으실 때 Instant Logo Search 사이트를 유용하게 사용해보세요.

기본적인 그라데이션 부터 독특한 패턴의 그라데이션을 css로 구현할 수 있게 해주는 사이트 'gradient magic'을 소개합니다. 그라데이션 패턴 스타일, 색상별로 원하시는 그라데이션을 찾아볼 수 있습니다. standard angular stripes checkered burst 위 5가지 스타일의 그라데이션을 확인 할 수 있습니다. 원하는 그라데이션을 선택하여 클릭하시면 큰화면으로 그라데이션을 확인할 수 있습니다. 그라데이션 썸네일 우측하단의 copy css를 통해 해당 그라데이션에 사용된 css소스를 복사하여 사용할 수 있습니다. 복사된 소스는 backgroud css로 사용하시면 됩니다. 사용 예시) 예시와 같이 직접 소스를 사용하셔서 독특한 패턴의 그라데이션들도 사용해보시길 추천드립니다.

html 과 css 만으로 이미지 마우스 오버시 효과 및 캡션 출력 해당 사이트에서 html, css 소스를 확인이 가능합니다.

원하는 색을 선택하면 해당 색과 어울리는 다섯가지 색상을 매치해주는 사이트 입니다. 위 이미지의 검정테두리 박스안에 있는 RGB 색상바를 조절하면 자동으로 오른쪽 박스의 색이 변경됩니다. 그럼 하단의 '6-color matching palette'에 있는 박스의 색상이 해당 색과 어울리는 색상으로 매치되어 나타납니다. 박스 하단에 색상코드도 출력되어서 활용하기가 편리합니다.

ios 스타일의 가상 키보드 플러그인 입니다. 첨부파일을 다운로드 받은후 압축을 해제하면 생성되는 examples/default.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 영문 소문자, 영문 대문자, 숫자 키보드를 지원하네요. ckeyboard.js 라는 파일의 소스코드를 열어서 보면 위 코드와 같이 각각의 키에 해당하는 글자를 설정해둔 소스코드를 볼수 있습니다. 약간 변경을 하면 한글을 입력받는것도 가능은 하겠다 싶어서 약간 손을 봤더니, 화면에 한글의 자음과, 모음을 표시하고 눌렀을때 입력을 받는것도 가능하지만, ㄱ ㅏ ㄴ ㅏ ㄷ ㅏ ㄹ ㅏ 식으로 입력이 되어버려서 결과적으로 제대로 된 한글로는 조합이 되지는 않네요. 간단하게 영문, 숫자를 입력받는 용도로 사용하기에는 좋을것 같습니다.