Layout Reference

그리드 시스템(Grid-System)

그리드 시스템은 선이나 면에 이미지와 텍스트를 맞춰 설계하는 디자인 방법론입니다.

그리드 시스템은 페이지를 구성하는 정보를 의미있고 논리적으로 일관성있게 구성하는 것을 중요시하는 그래픽 디자이너에게 도움을 주는 정밀한 프레임워크(구조,체제)입니다.

그리드는 디자인 구성요소들을 조화롭게 융합하고 질서를 부여하는 하나의 수단으로, 주어진 정보를 빠르게 쉽게 잃을 수 있도록 할 뿐만 아니라 본문, 제목 이미지 등 정교한 시각적 체계를 가질 수 있도록 도와줍니다.


그리드 시스템 구조





그리드 시스템 용어

  • Margin : 바깥쪽 여백
  • row : 행
  • column : 열
  • gutter : 열 간격
  • flowline : 기준선
  • module : 교환 가능한 구성 부분
  • spatial zone : 비어있는 공간


960 Grid System

960픽셀 = (60픽셀 + 20픽셀) * 12
컨테이너 가로 = (컬럼가로 + 커터가로) * 컬럼
컬럼의 폭 = {문서 전체 폭 - (커터 X 개수)} / 컬럼 개수
60픽셀 = {960픽셀 - (20픽셀 * 12)} /12
75픽셀 = {1140픽셀 - (20픽셀 * 12)} /12
80픽셀 = {1280픽셀 - (26픽셀 * 12)} /12
59픽셀 = {600픽셀 - (16픽셀 * 8) }/8
80픽셀 = {768픽셀 - (16픽셀 * 8) }/8
74픽셀 = {360픽셀 - (16픽셀 * 4) }/4
148픽셀 = {720픽셀 - (32픽셀 * 4) }/4 @2






Layout Style1 VIEW


Layout Style2 VIEW


Layout Style3 VIEW


Layout Style4 VIEW


Layout Style5 VIEW


SITE Layout Style1 VIEW


SITE Layout Style2 VIEW


시멘틱 태그 레이아웃

VIEW

미디어쿼리 레이아웃1 VIEW


미디어쿼리 레이아웃2 VIEW


미디어쿼리 레이아웃3 VIEW


미디어쿼리 레이아웃4 VIEW


미디어쿼리 레이아웃5 VIEW