CSS - Grid System (design)

Grid System 

 

- 디자이너가 웹 디자인을 할 때

그리드 시스템을 이용해서 디자인을 한다.

 

• container
• column
• gutter

 

 

grid system

 

여기서 하늘색 전체에 해당하는 것이 container,

hotpink색 칸 하나에 해당하는 것이 column이다.

 

주로 그리드는 12칸짜리를 많이 사용한다.

 

column을 통해 요소의 width를 설정한다.

(예> 3칸짜리, 6칸짜리 등 column을 기준으로 잡음)

 

 

gutter은 요소간의 여백을 주는 것.

= 간격을 위한 여백을 줌.

 

gutter

 

 

💡 이러한 grid-system을 반응형으로 해준 framework

===== Bootstrap!

 

 

 

---

ref 

• https://edu.goorm.io/learn/lecture/20583