Home 그리드 시스템 (Grid System)
Post
Cancel

그리드 시스템 (Grid System)

그리드 시스템 (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-개발-부트캠프-경력같은-신입으로-레벨업
This post is licensed under CC BY 4.0 by the author.