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

css grid를 이용하여 손쉽게 웹사이트 grid latout 을 잡을 수 있습니다. 샘플 소스에 있는 grid-template-columns: 100px 500px; grid-template-rows: 200px 100px 400px; 와 같이 grid-template-columns, grid-template-rows 프로퍼티를 이용하여 행과 열을 정의할 수 있습니다. 행과 열은 픽셀 단위로 고정 그리드도 만들수 있고, fr 단위 혹은 %단위로 가변 크기를 줘서 유연한 그리드도 만들 수 있습니다.

반응형으로 디바이스 크기에따라 다르게 출력되는 그리드 디자인입니다.데모사이트에서 압축파일을 받으실 수 있으며 압축해제후 css/component.css파일과 index.html 파일에서 html코드 및 css를 확인하실 수 있습니다. @media screen and (max-width: 1190px) { .cbp-rfgrid li { width: 20%; /* Fallback */ width: -webkit-calc(100% / 5); width: calc(100% / 5); } } @media screen and (max-width: 945px) { .cbp-rfgrid li { width: 25%; /* Fallback */ width: -webkit-calc(100% / 4); width: calc..

쇼핑몰에서 다양한 상품을 디스플레이 할때 꾸미기 좋은 제이쿼리 소스로, lsotope.js 소스를 바탕으로 적용되어있으며슬라이드는 Flickity 를 이용하여 상품이미지를 클릭하여 넘겨서 리스트에서 바로 확인할 수 있는 UI 를 가진 소스입니다. 상품의 사진이 있다 가정하고, 해당 상품별 이미지를 마우스 클릭후 슬라이드하면 아래와 같이 이미지가 넘겨지면서 보여지는 UI 를 가지고 있습니다. 또한 레이아웃 전체가 반응형 구조임으로 최근 트랜드적인 쇼핑몰의 기본 아웃풋으로 이용하는데 최적화 되어있습니다.

Grid layout 형태의 소스로 반응형 형태로 제작이되어 있어 PC 및 모바일에서 사용할 수 있는 소스입니다. 상단의 데모버튼을 클릭하면 4종류의 레이아웃 형태를 확인할 수 있습니다. 데모의 형태에 따라서 창이 출력되는 애니메이션종류 색상별 검색 등 다양한 기능들을 확인하실 수 있습니다. http://www.htmldrive.net/items/show/1835/jQuery-plugin-for-better-grid-layouts 위 링크에서 데모확인 및 소스를 다운로드 받으실수 있으며 압축파일에 html소스 및 관련 css/js 파일이 있으니 참고하시길 바랍니다. 사이트 제작에 많은 도움이 되시길 바랍니다.

License Released under the [GNU GPL license v3](https://www.gnu.org/licenses/gpl-3.0.html) 터치 친화적 인 Flickity 갤러리 및 Isotope 기반 필터 기능을 갖춘 반응이 빠른 제품 그리드 레이아웃입니다. 각 그리드 항목이 Flickity 이미지 슬라이더 인 반응 형 동위 원소 구동 제품 격자 레이아웃입니다. 작은 카트 아이콘 애니메이션은 제품이 장바구니에 추가되었음을 나타냅니다. 제품 필터는 동위 원소 필터 기능을 사용합니다. 일부 예시적인 미디어 쿼리는 레이아웃을 적응시키는 방법을 보여주기 위해 사용됩니다.