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

SSG(Show Story Gallery)는 jQuery 와 CSS3로 만들었습니다. 여러개의 이미지를 갤러리 형태로 보여주고 클릭하면 스토리 갤러리 형태로 보여주는 플로그인 입니다. 사용법 안내 입니다. 1.CSS 와 jQuery 를 호출합니다. 2. 플로그인을 호출 합니다. 3. 컨텐츠를 작성 합니다. Also image caption don't include me into SSG 컨텐츠 내용 중 BigImage1.jpg 와 같은 이미지 파일명을 원하시는 이미지 파일로 교체하시면 됩니다. 첨부된 압축 파일을 해제하시면 index.html 파일이 존재하며 index.html 파일을 브라우저로 호출하시면 보다 깔끔한 상태의 데모를 확인할 수 있습니다. ^^ 라이센스는 GNU GPL-3.0 license ..

다양한 PNG 이미지를 제공해주는 사이트이며, 대부분 일러스트 관련 PNG 로 무료라이센스라고 기본적으론 명시되어있습니다. 작가가 별도로 기부한 형태의 이미지라서 라이센스가 무료라고 명시되어있는듯한데요. 하지만 이미지 출처에 대한 부분은 각각의 작가별로 혹은 이미지 별로 다르게 되어있을 확률이 있습니다. 이미지 다운받을시 사용범위 및 라이센스에 대해 한번더 확인후 다운받으시길 권장드립니다.

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

고해상도 사진을 무료로 제공해주는 사이트 LIfe of Pix를 소개합니다. Life of Pix 는 무료 이미지 사이트로 유명한 unsplash[링크]와 동일하게 정기적으로 고퀄리티의 이미지가 업로드 되고 있습니다. 업로드 된 이미지는 개인 및 상업적 사용이 가능한 이미지이며 자세한 라이센스는 about페이지에서 확인하실 수 있습니다.[링크] 단어검색을 통해 이미지를 찾을 수 있고, 우측 상단 검색버튼을 클릭하시면 카테고리, 색상등으로도 검색하여 찾고자하는 이미지를 쉽게 찾아볼 수 있습니다. 이미지만이 아니라 무료 영상 사이트인 Life of vids[링크]도 확인하실 수 있사오니 무료 이미지, 영상자료를 쉽게 찾아보세요.

포토샵이나 이미지 편집툴이 있다면 쉽게 압축할 수 있지만그런 툴이 없을경우 유용하게 이용이 가능한 이미지 압축 사이트입니다.간단하게 파일 업로드후 몇번의 클릭만으로 이미지 화질이 크게 떨어지지 않게 용량을 줄여서 출력됩니다. 용량이 많은 이미지를 업로드 합니다. 업로드하는 이미지는 2.42MB 짜리로 업로드 해보겠습니다. 다운로드 받으시면... 566kb 로 77% 정도이 용량이 압축되어 다운로드 받아집니다. 이미지가 압축되었으나 큰 차이를 볼 수 없습니다.

고퀄리티의 음식관련 사진들을 모아놓은 무료 이미지 사이즈 foodiesfeed 입니다. 좋은 이미지가 좋은 디자인에 도움이 된다는 사실은 모두 알고 계실겁니다. 음식과 관련된 저작권 걱정없는 고퀄리티 무료 이미지 사이트입니다. 퀄리티가 높은 음식 사진들이 많아서 유용하게 사용할 수 있을 듯 합니다. ^^

Get Waves는 랜덤한 형태의 물결 svg이미지를 생성해줍니다. svg이미지로 웹사이트에 사용할 수 있으며, 랜덤한 물결이미지가 필요한 디자인 작업 시 이미지 편집을 통하여 유용하게 사용할 수 있습니다. 위 버튼으로 물결 모양을 아래와 같이 변경할 수 있습니다. 위 버튼은 색상표시 위치를 나타내며 아래와 같이 변경됩니다. 원하는 색상으로 변경 할 수 있고 바로 옆 %를 조절하여 투명도도 적용 할 수 있습니다. 위 바를 조절하시면 굴곡 정도를 표시할 수 있습니다. 위 주사위 버튼을 클릭해보시면 굴곡이 자유롭게 변경되어 다양한 굴곡 형태를 확인하실 수 있습니다. 원하는 형태의 굴곡이 생성되면 화면 가운데 다운로드 버튼을 클릭하면 svg 이미지 코드가 아래와 같이 출력됩니다. 해당코드를 복사하시거나 svg..

다양한 이미지 효과를 해당 데모페이지에서 라디오 버튼을 클릭하여 확인하실 수 있습니다. 라디오버튼 이미지 효과 밑 아래에 css코드가 노출되고 있으니 복사하여 적용하여 사용할 수 있습니다.데모링크를 클릭하면 샘플 페이지를 확인하실 수 있습니다. 익스플로러 상위버전, 크롬, 파폭등 최신 브라우저에서만 작동이되니 참고하시길 바랍니다 ^^

Compressor.io는 웹상에서 이미지 품질 손상 거의없이 유지하며 용량을 줄여주는 사이트입니다. pc뿐만아니라 모바일에서도 이미지 용량을 줄일 수 있습니다. 지원하는 이미지포맷은 JPEG, PNG, GIF, SVG 4종류가 있습니다. "select file" 버튼을 클릭하여 이미지를 업로드하면 용량 줄이기 전 후의 사진상태를 바로 확인할 수 있으며 용량이 얼마나 줄어드는지도 확인가능합니다. Download your file을 클릭하면 용량이 줄어든 이미지를 다운받아보실 수 있습니다. 용량 줄이기 전(왼쪽), 후(오른쪽) 이미지의 설정창을 확인해보시면 카메라 정보 등 불필요한 정보들이 제거된것을 확인하실 수 있습니다. 별도의 이미지 프로그램 사용없이 웹상에서 간편하게 이미지 용량을 줄일 수 있다는 점..

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