코딩 초보 필독! CSS 그리드 레이아웃, 2차원 레이아웃 설계 꿀팁!

그리드 레이아웃, 어렵지 않아! 😎

이번 영상에서는 웹사이트 디자인할 때 엄청 유용한 그리드 레이아웃에 대해 알아볼 거야. 플렉스 박스랑 비슷하면서도 좀 더 강력한 녀석이지!

그리드 레이아웃, 왜 쓸까? 🤔

• 2차원 레이아웃 설계: 플렉스 박스가 1차원(가로 또는 세로)으로만 배치하는 거라면, 그리드는 가로와 세로를 동시에 사용해서 훨씬 복잡하고 다양한 레이아웃을 만들 수 있어. 마치 바둑판처럼 칸을 나눠서 요소를 배치하는 거라고 생각하면 돼.

시작하기 전에 알아두면 좋은 것들 📚

• 그리드 레이아웃을 제대로 이해하려면 행(row), 열(column), 그리드 셀(grid cell), 그리드 트랙(grid track), 그리드 갭(grid gap) 같은 용어들을 미리 알아두면 좋아. 책이나 다른 자료를 한번 쓱 훑어보고 오면 더 이해하기 쉬울 거야!

그리드 레이아웃 만드는 방법 🛠️

가장 기본적인 방법은 HTML 요소에 display: grid; 또는 display: inline-grid; 속성을 주는 거야.

• display: grid;를 주면 그 요소는 그리드 컨테이너가 되고, 그 안에 있는 자식 요소들은 그리드 아이템이 돼.
• 이렇게 하면 그리드 아이템들이 원래 컨테이너를 꽉 채우지 않고 흩어져 있었다면, 자동으로 균등하게 나눠져서 컨테이너를 채우게 돼.

그리드 아이템 배치하기 🎨

그리드 컨테이너와 아이템 관계를 만들었으면 이제 본격적으로 아이템들을 배치할 수 있어.

1. 열(Column)과 행(Row) 만들기

• grid-template-columns: 열의 크기를 정하는 속성이야.
  • 예시: grid-template-columns: 100px 100px; (1열은 100px, 2열은 100px)
• grid-template-rows: 행의 크기를 정하는 속성이야.
  • 예시: grid-template-rows: 100px 50px; (1행은 100px, 2행은 50px)

2. fr 단위: 비율로 나누기! 비율! ⚖️

픽셀 말고 fr이라는 단위를 쓰면 공간을 균등하게 나눠 가질 수 있어.

• 예시: grid-template-columns: 1fr 2fr; (전체 공간을 3등분해서 첫 번째 열은 1, 두 번째 열은 2의 비율로 차지)
• grid-template-rows에도 똑같이 사용할 수 있어.

3. repeat() 함수: 반복은 간단하게! 🔁

똑같은 크기를 여러 번 반복해야 할 때 repeat() 함수를 쓰면 코드가 훨씬 짧아져.

• 예시: grid-template-columns: repeat(3, 1fr); (1fr 크기의 열을 3번 반복)
• grid-template-rows에도 똑같이 사용할 수 있어.

4. minmax() 함수: 최소/최대 크기 정하기 📏

아이템이 너무 작아지거나 커지는 걸 막고 싶을 때 minmax()를 사용해.

• 예시: grid-template-columns: minmax(100px, 1fr); (최소 100px 크기를 유지하되, 남는 공간은 1fr 비율로 차지)
• grid-template-rows에도 똑같이 사용할 수 있어.

5. gap: 칸 사이 간격 만들기 ↔️

그리드 아이템들 사이에 간격을 만들고 싶을 때 gap 속성을 사용해.

• row-gap (또는 grid-row-gap): 행 사이의 간격
• column-gap (또는 grid-column-gap): 열 사이의 간격
• gap: row-gap과 column-gap을 한 번에 지정할 때 사용.

주의: gap 속성은 인터넷 익스플로러 11에서는 지원되지 않으니 참고해!

아이템 정렬하기 (플렉스 박스랑 비슷해!) 🧘

그리드 아이템들도 플렉스 박스처럼 정렬할 수 있어.

• align-items: 그리드 셀 안에서 아이템을 세로 방향으로 정렬할 때 사용.
  • stretch (기본값): 셀을 꽉 채움
  • center: 가운데 정렬
  • start: 위쪽 정렬
  • end: 아래쪽 정렬
• justify-items: 그리드 셀 안에서 아이템을 가로 방향으로 정렬할 때 사용.
  • stretch (기본값): 셀을 꽉 채움
  • center: 가운데 정렬
  • start: 왼쪽 정렬
  • end: 오른쪽 정렬
• align-self: 특정 그리드 아이템만 세로 방향으로 정렬할 때 사용.
• justify-self: 특정 그리드 아이템만 가로 방향으로 정렬할 때 사용.
• place-items: align-items와 justify-items를 한 번에 지정할 때 사용. (첫 번째 값이 align-items, 두 번째 값이 justify-items)
• place-self: align-self와 justify-self를 한 번에 지정할 때 사용.

grid-template-areas로 배치하기 🗺️

이름을 붙여서 영역을 만들고, 그 영역에 아이템을 배치하는 방법이야. 마치 지도처럼!

1. grid-template-areas: 컨테이너에 영역 이름을 지정해.
   • 예시:
     css grid-template-areas: "header header" "sidebar main" "footer footer";
2. grid-area: 각 그리드 아이템에 위에서 지정한 영역 이름을 붙여줘.
   • 예시: grid-area: header;

그리드 번호로 배치하기 🔢

개발자 도구에서 보면 그리드 아이템마다 번호가 매겨져 있어. 이 번호를 이용해서 아이템을 배치할 수도 있어.

• grid-column-start / grid-column-end: 아이템이 시작하고 끝날 열 번호 지정.
• grid-row-start / grid-row-end: 아이템이 시작하고 끝날 행 번호 지정.
• grid-column: grid-column-start와 grid-column-end를 한 번에 지정.
• grid-row: grid-row-start와 grid-row-end를 한 번에 지정.

이 외에도 더 많은 그리드 속성들이 있으니, 궁금하면 아래 링크를 참고해서 더 깊이 공부해봐!

참고 자료 링크 (책에 나와있지 않은 모든 그리드 이해하기)