그리드 시스템 (Grid System)
용어
unit: 그리드 한 칸의 크기를 이야기 함.gutter: unit 사이의 거리를 gutter라고 함 (사실은 유닛 좌+우 값)column:gutter+unit은 column- column의 모양은 다음과 같음 -> [gutter][unit][gutter] = column
margin: css의 마진을 이야기하는 것이 아니고 왼쪽, 오른쪽 마지막 컬럼의 여백을 이야기 함.- 즉 마진은 여기임 (6column이라고 했을 때) -> [margin][column][column][column][column][column][column][margin]
그리드 시스템을 봤을 때 체크해야 할 것
- 컬럼은 몇 개?
- 컬럼 안의 유닛 사이즈는 몇 픽셀(or %)?
- 거터는 몇 픽셀?
피그마에서 그리드 레이아웃 확인하기
Ctrl + G를 누르면 그리드 레이아웃 화면을 확인할 수 있음.
Reference
- https://edu.goorm.io/lecture/25681/김버그의-ui-개발-부트캠프-경력같은-신입으로-레벨업