본문 바로가기
개발/웹 개발

Day 10: CSS Grid

$ecu_Log 2024. 8. 7.

1. 오늘의 학습 목표

학습 목표: 행(row)과 열(column)을 동시에 사용하여 2차원 공간에 아이템을 배치하는 CSS Grid Layout의 핵심 개념을 이해합니다. 그리드 트랙을 정의하고, 각 아이템을 원하는 셀(Cell)에 배치하여 복잡한 웹 페이지 레이아웃을 만드는 방법을 배웁니다.

핵심 요약: Grid는 Flexbox가 다루기 어려운 2차원(행과 열) 레이아웃을 위해 탄생했으며, 웹 페이지의 전체적인 틀을 잡는 데 매우 강력하고 직관적인 도구입니다.

2. 핵심 개념 파헤치기

2.1. CSS Grid란 무엇인가?

CSS Grid는 Flexbox와 마찬가지로 컨테이너(Container)와 아이템(Item) 개념으로 구성됩니다. 레이아웃을 만들고 싶은 요소에 display: grid;를 적용하면 해당 요소는 'Grid Container'가 되고, 그 직계 자식 요소들은 'Grid Item'이 됩니다.

Flexbox가 한 방향(1차원)의 레이아웃에 최적화되어 있다면, Grid는 행과 열, 즉 두 방향(2차원)을 동시에 제어하여 페이지 전체의 구조를 짜는 데 특화되어 있습니다.

 

2.2. Grid의 핵심 용어

  • Grid Line: 그리드의 행과 열을 구분하는 선입니다. 아이템을 배치하는 기준이 됩니다
  • Grid Track: 두 개의 그리드 라인 사이의 공간으로, 하나의 행(row) 또는 열(column)을 의미합니다
  • Grid Cell: 그리드의 가장 작은 단위로, 한 개의 행과 한 개의 열이 교차하는 공간입니다.
  • Grid Area: 4개의 그리드 라인으로 둘러싸인 사각형 영역으로, 여러 개의 셀로 구성될 수 있습니다

2.3. Grid Container에 적용하는 속성

  • display: grid;: Grid 레이아웃을 시작합니다
  • grid-template-columns / grid-template-rows: 그리드의 열과 행의 크기와 개수를 정의합니다. 이때 fr(fraction, 비율) 단위를 사용하면 유연한 크기 조절이 가능합니다
  • gap (또는 grid-gap): 그리드 트랙 사이의 간격(Gutter)을 설정합니다
  • grid-template-areas: 각 영역에 이름을 부여하여 아이템을 더 직관적으로 배치할 수 있게 합니다.

2.4. Grid Item에 적용하는 속성

  • grid-column-start / grid-column-end: 아이템이 시작하고 끝날 열의 그리드 라인 번호를 지정합니다
  • grid-row-start / grid-row-end: 아이템이 시작하고 끝날 행의 그리드 라인 번호를 지정합니다
  • grid-column / grid-row: 위 속성들의 단축 속성입니다. (예: grid-column: 1 / 3;)
  • grid-area: grid-template-areas에서 지정한 영역의 이름을 부여받아 해당 위치에 배치됩니다

3. 코드로 배우기

3.1. 구현 목표

CSS Grid를 사용하여 헤더, 메인 콘텐츠, 사이드바, 푸터로 구성된 전형적인 웹사이트 레이아웃을 만들어 봅니다.

 

3.2. [1단계: 기본 HTML 및 Grid 시작]

레이아웃을 구성할 시맨틱 태그들을 준비하고, 이들을 감싸는 부모 요소(.grid-container)에 display: grid;를 적용합니다.

<style>
  .grid-container {
    display: grid;
    gap: 10px; 	/*아이템 사이의 간격 */
  }
 			 /*아이템들이 눈에 잘 보이도록 기본 스타일 추가 */
  .grid-container > * {
    background-color: lightblue;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="grid-container">
  <header>Header</header>
  <main>Main Content</main>
  <aside>Sidebar</aside>
  <footer>Footer</footer>
</div>

 

3.3. [2단계: 그리드 구조 정의하기]

grid-template-columns와 grid-template-rows를 사용하여 그리드의 형태를 정의합니다. 여기서는 3개의 열과 3개의 행을 만듭니다. fr 단위는 가용한 공간을 지정된 비율로 나누어 가집니다.

<style>
  .grid-container {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: 100px auto 100px;
  }
</style>

 

3.4. [3단계: Grid 라인을 이용해 아이템 배치하기]

각 아이템이 몇 번째 그리드 라인부터 몇 번째 라인까지 차지할지 지정하여 위치를 결정합니다.

<style>
          /*.grid-container 스타일은 이전과 동일 */
  header {
    /* 1번 열 라인에서 시작해서 4번 열 라인(-1)에서 끝남 */
    grid-column: 1 / 4;
  }
  main {
    grid-column: 2 / 3;     /* 2번 열 라인에서 시작해서 3번 열 라인에서 끝남 */
  }
  aside {
    grid-column: 3 / 4;     /* 3번 열 라인에서 시작해서 4번 열 라인에서 끝남 */
  }
  footer {
    grid-column: 1 / 4;         /* 모든 열 차지 */
  }
</style>
<!-- HTML은 이전과 동일 -->

4. 전체 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>CSS Grid Layout</title>
  <style>
    body { margin: 20px; font-family: sans-serif; }
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 4fr 1fr;
      grid-template-rows: auto 1fr auto;
      gap: 15px;
      height: 90vh;
    }
    .grid-container > * {
      background-color: lightskyblue;
      border-radius: 5px;
      padding: 20px;
      text-align: center;
      font-size: 1.2em;
    }
    .header {
      grid-column: 1 / -1;
    }
    .main {
      grid-column: 2 / 3;
    }
    .sidebar {
      grid-column: 3 / 4;
    }
    .footer {
      grid-column: 1 / -1;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <header class="header">Header</header>
    <main class="main">Main Content</main>
    <aside class="sidebar">Sidebar</aside>
    <footer class="footer">Footer</footer>
  </div>
</body>
</html>

'개발 > 웹 개발' 카테고리의 다른 글

Day 12: JavaScript 데이터 타입과 변수  (1) 2024.08.09
Day 11: 반응형 웹 디자인과 CSS Grid  (0) 2024.08.08
Day 9: CSS Flexbox  (1) 2024.08.07
Day 8: CSS 박스 모델과 레이아웃 기초  (0) 2024.08.05
Day 7: CSS 선택자와 명시도  (0) 2024.08.02

'개발/웹 개발' 관련글

티스토리툴바