권장 브라우저 안내

이 웹사이트는 Internet Explorer 9 버전 이상에서만 이용 가능합니다.
편리한 사이트 이용을 위하여 최신 브라우저로 업그레이드해주시기 바랍니다.

저희와 함께 하시겠습니까?

프로젝트 의뢰는 아래로 문의 주시기 바랍니다.
websre@naver.com
Tel: 1800-9356

  • Portfolio

    Our work 에서 자세한 정보를 확인하세요.

  • General

    202, 71-2, Gajang-ro, Seo-gu, Daejeon
    대전광역시 서구 가장로 71-2(괴정동, 온누리빌) 202호

본문 바로가기
News
January 22, 2019
Article

복잡한 CSS 그리드 레이아웃을 시각적으로 쉽고 빠르게 완성하는 생성기

본문

복잡한 CSS 그리드 레이아웃을 시각적으로 쉽고 빠르게 완성하는 CSS Grid Layout 생성기 활용 방법을 살펴보자.

 

모든 디자인 영역에서 그리드 시스템은 중요한 역할을 담당하고 있고 디자인에 있어서 그 비중은 더 크다고 볼 수 있다. 그리드는 수평과 수직으로 구성된 디자인의 기본 요소라고 할 수 있다.

 

그리드는 디자인 작업에 일관성을 부여하고 그래픽 요소의 체계적인 배열을 갖추는 데 도움이 된다. 또한, CSS CLASS를 활용해서 페이지 레이아웃을 구축하는 행과 열을 제어할 수 있고 그것을 토대로 복잡한 중첩 레이아웃도 어렵지 않게 구축할 수 있다.

 

 

99BF9F415C44B56504

 

이글을 통해 소개하는 css-grid-layout-generator는 기존에 선보인 다양한 그리드 생성기와 달리 더 직관적이고 시각적인 인터페이스로 복잡한 그리드 레이아웃을 손쉽게 제작하고 빠르게 활용할 수 있도록 해준다.

그리드 트랙 자동 생성, HTML을 JSX로 내보내기, 클래스 이름을 CSS 모듈로 내보내기 그리고 Code Pen 생성 버튼을 통해 코드 생성 등 다양한 편의 기능을 제공하고 있다. 상에서 실행되므로 시간과 장소에 구애받지 않고 활용할 수 있다.

 

992B41445C44B55804

 

그리드 레이아웃 생성기는 다양하다. 하지만 디자이너, 퍼블리셔가 보다 쉽고 빠르게 그리드 레이아웃을 만들 수 있는 생성기는 드물다. 이번 기회에 css-grid-layout-generator를 활용해서 생산성을 높여 보는 것은 어떨까?



출처: https://www.designlog.org/2512665?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+DesignlogOfMaru+(DESIGN+LOG+-+Design+%26+Digital+Convergence+Webzine) [디자인 로그(DESIGN LOG)] 

디자인 샘플보기