웹솔루션개발 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입니다. https://webdesignerwall.com/tutorials/responsive-column-layouts 미디어쿼리를 이용하여 뷰포트 너비에 따라 4열에서 3열 , 3열에서 2열로 자동 변경되는 반응형 열 레이아웃 CSS입니다. 복잡한 구조를 간단한 CSS를 이용하여 구성이 가능합니다. IE 11이하에서는 지원하지 않으나, 관련 자바스크립트 사용시 지원가능합니다.

flexbox를 이용하여 레이아웃을 구성을 하고자 한다면 꼭 참고하면 좋은 사이트입니다. 10가지의 레이아웃을 소개하고 있습니다 http://wit.nts-corp.com/2018/07/27/5274 lexbox 속성이 나온지는 꽤 되었지만, 브라우저의 지원 및 실무에서는 실제로 사용하지 않는 경우가 많은게 사실입니다 브라우저도 많이 업그레이드되어 장점이 많은 flexbox를 활용하면 보다 다양하고 손쉬운 레이아웃을 만들수 있으면 좋겠네요. 위 링크에서 flexbox에 대한 자세한 내용을 확인할 수 있습니다.

쇼핑몰에서 다양한 상품을 디스플레이 할때 꾸미기 좋은 제이쿼리 소스로, 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 파일이 있으니 참고하시길 바랍니다. 사이트 제작에 많은 도움이 되시길 바랍니다.

a 태그의 속성의 위치를 파악하여 스크롤 효과를 줄수 있는 원페이지형 레이아웃입니다.. 간단히 a태그를 추가 그리고 박스 영역을 설정한 후 클릭만으로 이동이 가능한 레이아웃입니다. 크롬에서 테스트를 하였으며, 압축파일 하나에 모두 설정이 되어 있으니 쉽게 확인하셔서 사용하실 수 있습니다 ^^

사이트에 접속하시면 상단에는 유료로 판매하는 PSD 가 있고 하단에는 무료로 제공하는 PSD 가 있습니다. https://little-neko.com/portfolio-little-neko-website-templates/ 현재 총 5개의 무료 PSD 를 제공하고 있네요 ^^; https://little-neko.com/downloads/hideo-home-page-psd/ https://little-neko.com/downloads/edena-psd-freebie/ https://little-neko.com/downloads/ashley-home-page-psd/ https://little-neko.com/downloads/lazy-day-one-page-psd/

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