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

안녕하세요 해피CGI 입니다. 해피 네고 솔루션 Ver1.3 업그레이드 되었습니다. 자세한 사항은 아래의 내용을 참고하시기 바랍니다. 더욱 강력한 기능으로 보답하겠습니다. 감사합니다.

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

ext-shadow css를 이용하여 텍스트에 그림자 효과를 줄수 있습니다. text-shadow: x축값, y축값, 번짐정도, 색상값; 예시) text-shadow: 2px 2px 5px red; ​ text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; 위 예시와 같이 그림자를 출력할 수 있으며, 두개 이상의 그림자도 생성 가능합니다. 두개 이상의 값을 적용하면 아래와 같이 겹쳐보이는 글자를 만들어볼 수 있습니다. * 첨부된 사이트를 참고하시면 자세한 소스를 확인하실 수 있습니다. text-shadow: 5px 5px 0px #eb452b, 10px 10px 0px #efa032, 15px 15px 0px #46b59b, 20px 20px 0px #017e7f, 25px ..

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

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

JavaScript 를 사용하지 않습니다. 순수 CSS 만으로 사이클 애니메이션 기능을 만드는 방법 입니다. 테스트 한 브라우저는 Chrome, IE 11, IE Edge 입니다. 압축 파일에 보시면 test.html 코드를 참고하시면 조금 더 쉽습니다. 1. 먼저 css 를 선언하세요. 2. 컨텐츠를 구성하세요. 3. 결과물을 확인하세요. 퍼센트의 배경 크기를 설정하려면? CSS의 rotate 값을 변경하세요. 100% 해당 하는 값으로 90이 셋팅되어 있는데요. 90을 다른값으로 변경해 보세요. 애니메이션 타임을 변경하고 싶다면? CSS의 animation: fill ease-in-out 1s; 값을 수정하세요. 1s 는 1초를 뜻합니다. 해당 자료의 출처는 https://codeconvey.com/..

jQuery 를 이용하여 제작된 슬라이드 플러그인 입니다. 3가지 스타일( coverflow | carousel | flat )을 옵션 설정으로 컨트롤 가능 합니다. 3D 효과를 적용하려면 carousel 로 적용해야 함을 참고 하세용. 라이센스 : MIT 지원 브라우저 Chrome, Safari & IOS Safari, Firefox, IE 10+, IE 8~9 (제한적 지원) 사용방법은 아래를 참고하세요. 1. CSS 와 jQuery를 호출하세요. 2. 슬라이드 컨텐츠를 구성하세요. Plain ol' HTML! ... 3. 슬라이드를 실행시키세요. var options = { start: 0, fadeIn: 400, loop: true, buttonPrev: 'Previous', buttonNext:..

css를 이용하여 슬라이딩 되는 탭메뉴 입니다. 탭메뉴를 클릭하면 활성화된 탭 효과가 슬라이딩으로 이동됩니다. css 만으로 구현된 탭메뉴 해당 사이트에서 자세한 소스 확인이 가능합니다.

기본 셀렉트박스의 스타일을 지정하고 간단하게 몇가지 기능을 추가하는 jQuery 플러그인입니다. 다운로드 받은 파일의 압축을 해제하고 index.html 파일을 웹브라우저로 열어서 보면 확인이 가능합니다. 기본 셀렉트박스의 스타일을 조절해서 각 옵션들 마다 이미지, 옵션값, 타이틀값 등을 이용해서, 셀렉트박스를 이용해서 옵션을 선택시 아래 그림 처럼 표시할수 있습니다. HTML 태그랑 비교해보면, option 태그에 몇가지 정해둔 속성들을 이용해서 제어하는게 가능해보입니다. 검색어를 이용해서 많은 옵션들 중에 선택하고자 하는 옵션을 쉽게 찾아내는 기능을 구현하는것도 가능하네요. 여러개의 옵션을 다중으로 선택하는 multiple 셀렉트박스도 도 위 그림과 같이 검색어를 입력해서 옵션을 찾아내거나, 어떤 옵..

요즘 네이버나 여러 사이트에서 볼수 있는 사이드 바입니다. 스크롤을 하면 fixed되서 내려오면서 하단의 내용컨텐츠와 만나면 스톱이되어 정지가 됩니다. 웨일브라우저로 naver메인에서 확인할 수 있습니다.데모페이지에서 샘플 및 github를 통해서 자료를 내려받으실 수 있습니다. t하단에 내용에 걸릴시 cgimall 솔루션에서는 뉴스솔루션에서도 확인하실 수 있습니다. http://newspred.cgimall.co.kr/