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

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

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/

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

공공데이터포털을 통해 제공되고 있는 전국 병원, 의원 찾기 API 입니다. https://www.data.go.kr/dataset/15000736/openapi.do 병원, 의원 FullData 내려받기 서비스 및 어린이병원 데이터등을 이용 할 수 있습니다. 자세한 이용 방법은 https://www.data.go.kr/dataset/15000736/openapi.do 페이지의 참고문서를 확인 하시면 됩니다.

Daum 검색 API 입니다. 홈페이지에 Daum 검색 기능을 구현 할 수 있습니다. JSON 을 통해 검색결과를 받을수가 있으며 파싱하여 홈페이지에 적용을 하면 됩니다. 지원되는 검색은 아래 페이지에서 확인이 가능 합니다. https://developers.kakao.com/docs/latest/ko/daum-search/common JSON 값을 받기위해 전달해야 될 값과 전달받은 값에 대한 안내는 아래 페이지에서 확인을 할 수 있습니다. https://developers.kakao.com/docs/latest/ko/daum-search/dev-guide

모바일용 부드러운 메뉴를 만드는 css + JAVASCRIPT 입니다. css + JAVASCRIPT 를 이용하여, 부드러운 액션이 적용된 모바일 메뉴 소스입니다. CSS 전환 속도를 이용하여, 속도 설정도 가능하며, SVG 아이콘을 사용하여 원하는 메뉴로 쉽게 변경 사용이 가능합니다.