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

Css를 이용한 Masonry Grid 디자인 갤러리입니다. css의 column옵션을 이용해서 디자인되고 있으며 css column 속성은 브라우저별 접두사를 붙여 사용해야 합니다. 크롬,사파리 -webkit- 파이어폭스 -moz- 오페라 -o- 익스플로러 -ms- (11,엣지 제외) column 옵션을 이용해서 단의 디자인을 구성하고 있으며 이미지 크기를 100%로 지정하여 해당 효과가 구현이되어 있습니다. 데모보기를 클릭하시면 결과물을 확인하실 수 있습니다. 최신버전의 브라우저에서만 동작이 됩니다^^

사진,목업,비디오,사운드,아이콘,폰트등 무료로 제공되고 있는 사이트를 한번에 모아서 보여주는 사이트입니다. 북마크에 보관되어 있는 사이트들을 찾아서 들어가도 되지만 한번에 모아서 보여주니 더 편리한거 같네요 사이트 제작에 많은 도움이 되길 바랍니다^^ ​

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

안녕하세요 해피CGI 입니다. 이번에 소개해 드릴 자료는 AJAX 와 HTML5 를 이용하여 이미지를 업로드 하는 자료 입니다. 다른 업로드 기능과 비교하면 매우 가볍다는 장점이 있습니다. 하지만 너무 가볍게 만들어서 iE11 에서는 정상작동 하지 않습니다. 아마도 이미지를 드래그하면 미리보기 형태로 보여주는 이미지 preloaded 때문일 것으로 예상 합니다. 다른 업로드 툴은 무겁지만 IE11 에서도 이미지 preloaded 를 지원하기 위해 외부 플러그인들을 연결해서 사용합니다. 해당 프로그램은 이미지 preloaded 기능을 제거하고 사용하시길 원하시거나 ... 크롬 또는 IE Edge 브라우저 전용으로 사용하시거나 한다면 문제 없이 사용할 수 있을 것으로 보입니다. 해당 자료는 MIT 라이센스 ..

다양한 벡터로 제작된 캐릭터들을 확인하고 이용할 수 있는 사이트입니다. 썸네일에 무료인지 알수있도록 FREE라고 확인은 할 수 있지만 사용시에는 자세한 라이센스를 확인해 보시길 바랍니다. ​ 원하는 벡터 캐릭터의 썸네일을 누르면 자료에 대한 설명이 나오고 하단에 다운로드 링크를 확인하실 수 있습니다. ​링크를 누르면 또 다시 다운로드버튼이 나오고 버튼을 누르면 모달창이 나오지만 해당 창의 내용은 무시하시고 조금만 기다리시면 다운로드가 됩니다. ZIP파일을 받아서 압축을 풀어보시면 ai.eps.pdf 파일이 있으니 확인 후 사용하시면 됩니다 ^^ ​ ​ ​

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

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

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

반응형 이미지 갤러리로 클릭시 모달창으로 이미지가 표시되며,제한된 그림 요소에 대해 유사한 반응 이미지 방식을 사용하는 이미지 갤러리를 만들어 줍니다. 브라우저 크기에 따라 반응형으로 이미지 갤러리가 정렬됩니다. 클릭시 이미지 썸네일이 슬라이딩으로 처리되는 형태의 모달창으로 구현됩니다. 핵심소스인 와 하단에 소스 및 설정 스크립트 부분을 설정하여 제어가 가능합니다.

마우스 오버시 카드가 뒤집히면서 다른 정보를 보여줄 수 있습니다. css 만으로 구현이 가능합니다.