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

시작값과, 종료값을 입력받기 위한 용도로 사용할 데가 많을것 같습니다. 기본 데모는 아래의 링크를 통해서 확인이 가능합니다. http://ionden.com/a/plugins/ion.rangeSlider/demo.html 스킨도 몇가지 제공을 해주네요. 약간 용도를 바꾼 예제들은 http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html 날짜나 시간을 입력받기 용도로도 사용이 가능하네요. 사용자가 인터렉티브하게 사용하는 예제는 http://ionden.com/a/plugins/ion.rangeSlider/demo_interactions.html 위 링크를 통해서 가능합니다. 사용된 예제처럼 이용하기 위해서 어떤 스크립트를 작성해야 하는지를 페이지에서 ..

Css 그리드 레이아웃을 이용하여 만들어진 사이트를 모아서 볼수있는 사이트입니다. 자신이 만든 사이트도 제출할 수 있으며 grid 레이아웃을 만들기위해서 float, lnline, inline-block, table-cell등 다양한 코드를 이용하여 만들지만 구성에따라 틀어짐이 발생하기에 다른사람들은 어떻게 만들었는지 참고하기 좋은 곳입니다. 그리드 레이아웃은 아래의 링크를 참고하세요 [그리드 레이아웃]

스크롤할 때 애니메이션 효과를 줄수있는 css3로 만들어진 라이브러리입니다. 스크롤을 할 때 서서히 사라지거나 오른쪽, 왼쪽에서 나타날 수 있는 등의 효과를 줄수 있습니다. 한번에 작동으로 끝내는 것이 아니라 올리고 내릴때 자연스럽게 서로 반대되는 효과가 나타납니다. 홈페이지에 가셔서 다운받으신 후 dist 폴더에 aos.css, aos.js를 사용합니다. 스크립트에 AOS.init();을 입력합니다. 효과를 사용할 태그에 data-aos="애니메이션효과이름"을 입력합니다. 위 이미지는 사용가능한 애니메이션 목록입니다. 그 외 자세한 설명은 https://github.com/michalsnik/aos에 있습니다.

Unsplash에서 제공되는 사진들은 CC0(Creative Commons Zero) 라이센스를 채용하여 상용 용도로의 사용에 제한이 없고 수정 및 재배포도 가능합니다.(https://unsplash.com/license에서 확인가능)

부트스트랩에는 필터링기능이 없으나, JQuery를 이용하여 구성요소를 필터링 검색할 수 있습니다. 대 소문자 구분없이 테이블 항목의 내용을 검색할 수 있습니다. 검색 및 필터검색에 따라 해당하지 않는 객체 항목은 숨김처리됩니다. 위 사이트에는 드롭다운형 필터 검색 기능, 일반 내용, 버튼 등도 검색/필터에 적용되어 디스플레이 처리 됩니다.

화면의 상하 스크롤시 메뉴바 고정 혹은 좌우 위치에 고정되는 메뉴사용시 이용가능한 부트스트랩 플로그인 affix 입니다. data-offset-top 수치를 이용하여, 고정바 이벤트가 실행될 위치를 설정하면 됩니다. Affix 메서드 값, 이벤트 값을 이용해서 상하좌우 객체의 위치값을 따로따로 설정이 가능합니다. 고정메뉴을 자주쓰는 트렌드에 맞춰서 활용하기 쉽네요.

셀렉트박스를 편리하게 만들어주는 jquery 플러그인 입니다. 셀렉트 박스에 검색을 달수도 있습니다. 멀티 셀렉트 박스로 모양도 깔끔하게 사용할수 있습니다. 13년도 부터 오랫동안 개발되고 있는 플러그인으로 이번 1.8.3 버전에서는 Remove clip property by moving chosen-single’s search input. (#2816) 버그픽스가 되었습니다.