DAY 32. 그리드 레이아웃(Grid Layout)

반응형 웹 디자인responsive web design을 사용했으면

화면 너비에 따라 웹 문서 안의 요소들을 다시 배치해야 하는데,

그 배치 기준이 되는 것이 바로

 

이번 주제인

그리드 레이아웃Grid Layout

: 웹 사이트를 여러 개의 colomn으로 나누고

웹 요소(메뉴, 본문, 이미지 등)를

화면에 맞게 배치하는 것.

 

 

그리드 레이아웃의 장점

레이아웃을 일정하게 유지할 수 있음.      (∵ 화면을 규칙적으로 배열하니까.)

 

 

그리드 레이아웃의 특징

• 시각적으로 안정된 디자인 제작 가능
• 업데이트가 편한 웹 디자인 구성 가능
• 요소를 자유롭게 배치 가능

그리드 레이아웃 만드는 법

• flexible box layout(= flex box layout)
  그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것.
  여유 공간이 있으면 너비, 높이 적절히 늘이고 줄이는 것 가능.
  수평 방향 or 수직방향 → 하나를 주 축으로 정하고 박스를 배치함.
  화면에 정해진 수평 길이 or 수직 길이를 넘어서면 수직 or 수평으로 이동해서 다시 순서대로 배치함.
   
• CSS grid layout
  수평 or 수칙 어느 방향으로든 배치할 수 있음. 레고 블록을 끼워맞추듯 요소 배치.
   
• *가변 그리드를 float 속성으로 사용
  * 가변 그리드: 화면의 크기에 관계 없이 자유롭게 늘어나거나 줄어들 수 있도록 width, margin 값 등을 px 단위가 아니라 % 단위로 제작하는 기술.

 

 

flex box layout과 CSS grid layout은 각각 별도의 포스팅으로 다룰 예정이다.