본문 바로가기
Study

07. CSS Grid Layout 가이드 | 웹 개발 기초

by 구구 구구 2024. 7. 7.
반응형

로코코 스타일, dall-e

 

CSS Grid Layout 가이드: 유연하고 강력한 웹 레이아웃 디자인

 

01. 서론

1) CSS Grid Layout이란?

CSS Grid Layout은 웹 페이지의 2차원 레이아웃을 구성하는 데 사용되는 CSS 모듈입니다. 행(row)과 열(column)을 기준으로 요소를 배치할 수 있으며, 복잡한 레이아웃을 쉽게 구현할 수 있습니다. Flexbox가 1차원 레이아웃에 최적화되어 있는 반면, Grid Layout은 2차원 레이아웃을 다루기 때문에 더 복잡한 디자인을 구현하는 데 유용합니다.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    text-align: center;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

위 예제는 3개의 열로 구성된 그리드 레이아웃을 보여줍니다. 각 그리드 아이템은 동일한 간격으로 배치됩니다.

2) Grid Layout의 중요성

Grid Layout은 웹 디자인에서 여러 가지 이유로 중요합니다:

  • 유연성: 다양한 화면 크기와 장치에 적응하는 유연한 레이아웃을 쉽게 구성할 수 있습니다.
  • 단순화: 복잡한 레이아웃을 단순화하고, 명확한 구조를 제공하여 유지 보수성을 높입니다.
  • 정렬과 배치: 요소들을 정밀하게 정렬하고 배치할 수 있어 디자인의 일관성을 유지합니다.
  • 반응형 디자인: 미디어 쿼리와 결합하여 반응형 웹 디자인을 쉽게 구현할 수 있습니다.
<style>
  .responsive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 15px;
  }
  @media (max-width: 600px) {
    .responsive-grid {
      grid-template-columns: 1fr;
    }
  }
</style>
<div class="responsive-grid">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
</div>

위 예제는 화면 크기에 따라 레이아웃이 변경되는 반응형 그리드 레이아웃을 보여줍니다. 화면 너비가 600px 이하일 때, 한 줄로 배치됩니다.

Grid Layout은 웹 디자인을 단순화하고, 유지 보수를 쉽게 하며, 다양한 장치와 화면 크기에 적응하는 유연한 레이아웃을 제공하여 사용자 경험을 향상시킵니다. 이를 통해 효율적이고 일관된 웹 페이지를 디자인할 수 있습니다.

 

02. Grid Layout의 기본 개념

1) 그리드 컨테이너와 그리드 아이템

그리드 컨테이너는 CSS Grid Layout을 활성화하는 부모 요소입니다. display 속성을 grid로 설정하여 사용합니다. 그리드 컨테이너 안에 있는 모든 자식 요소는 그리드 아이템이 됩니다.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    background-color: #2196F3;
    padding: 10px;
  }
  .grid-item {
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.8);
    padding: 20px;
    text-align: center;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

이 예제에서는 .grid-container가 그리드 컨테이너 역할을 하며, 그 안에 있는 모든 .grid-item이 그리드 아이템이 됩니다.

2) 주요 용어 설명

주요 용어는 다음과 같습니다:

  • 그리드 라인(Grid Line): 그리드 셀을 구분하는 선.
  • 그리드 트랙(Grid Track): 두 개의 그리드 라인 사이의 공간 (열 또는 행).
  • 그리드 셀(Grid Cell): 그리드 라인이 교차하여 만들어진 단일 사각형.
  • 그리드 영역(Grid Area): 여러 그리드 셀이 모여 만들어진 영역.
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px;
    gap: 10px;
  }
  .grid-item {
    background-color: lightblue;
    text-align: center;
    padding: 20px;
  }
</style>
<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
</div>

위 예제에서 그리드 컨테이너는 3개의 열과 2개의 행으로 구성되며, 각 셀은 그리드 아이템이 차지하고 있습니다.

실행 결과: 4개의 그리드 아이템이 3x2 그리드 내에 배치되며, 각 셀 간의 간격은 10px입니다.

이와 같이 그리드 컨테이너와 아이템을 사용하여 복잡한 레이아웃을 쉽게 구성할 수 있습니다. 주요 용어를 이해하면 그리드 레이아웃의 구성 요소와 동작 방식을 더 잘 이해할 수 있습니다.

 

03. 주요 CSS Grid 속성

1) grid-template-columns, grid-template-rows

이 속성들은 그리드 컨테이너의 열과 행의 크기를 정의합니다. grid-template-columns는 열의 크기를, grid-template-rows는 행의 크기를 설정합니다.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 1fr;
    grid-template-rows: 100px 200px;
    gap: 10px;
  }
  .grid-item {
    background-color: lightblue;
    text-align: center;
    padding: 20px;
  }
</style>
<div class="grid-container">
  <div class="grid-item">A</div>
  <div class="grid-item">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
  <div class="grid-item">E</div>
</div>

결과: 첫 번째 열은 100px, 두 번째 열은 200px, 세 번째 열은 가용 공간을 차지하며, 행은 각각 100px과 200px입니다.

2) gap, row-gap, column-gap

이 속성들은 그리드 아이템 간의 간격을 설정합니다. gap은 행과 열 간격을 모두 설정하며, row-gap은 행 간격, column-gap은 열 간격을 개별적으로 설정할 수 있습니다.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
  }
  .grid-item {
    background-color: lightgreen;
    text-align: center;
    padding: 20px;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

결과: 모든 그리드 아이템 간의 간격이 20px로 설정됩니다.

3) grid-column, grid-row, grid-area

이 속성들은 그리드 아이템의 시작과 끝 위치를 설정합니다. grid-column과 grid-row는 아이템의 위치를 정의하고, grid-area는 그리드 셀의 영역을 설정합니다.


<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 100px);
    gap: 10px;
  }
  .item1 {
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    background-color: lightcoral;
  }
  .item2 {
    grid-area: 2 / 2 / 4 / 4;
    background-color: lightseagreen;
  }
  .grid-item {
    background-color: lightblue;
    text-align: center;
    padding: 20px;
  }
</style>
<div class="grid-container">
  <div class="grid-item item1">A</div>
  <div class="grid-item item2">B</div>
  <div class="grid-item">C</div>
  <div class="grid-item">D</div>
</div>

결과: item1은 첫 번째 열과 두 번째 열을 차지하고, item2는 두 번째 행에서 네 번째 행까지 차지합니다.

4) justify-items, align-items, justify-content, align-content

이 속성들은 그리드 아이템의 정렬을 정의합니다.

  • justify-items: 수평 축을 따라 아이템을 정렬합니다.
  • align-items: 수직 축을 따라 아이템을 정렬합니다.
  • justify-content: 그리드 컨테이너 내에서 전체 그리드를 수평 축을 따라 정렬합니다.
  • align-content: 그리드 컨테이너 내에서 전체 그리드를 수직 축을 따라 정렬합니다.
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    gap: 10px;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    height: 300px;
  }
  .grid-item {
    background-color: lightpink;
    text-align: center;
    padding: 20px;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

결과: 모든 그리드 아이템이 수평 및 수직 축을 따라 중앙에 정렬되며, 전체 그리드가 컨테이너 내에서 중앙에 위치합니다.

 

04. Grid Layout 심화 학습

1) display

display: grid는 그리드 컨테이너를 정의하여, 그 안의 자식 요소들을 그리드 아이템으로 설정합니다. 이 속성을 사용하면, 그리드 레이아웃을 쉽게 활성화할 수 있습니다.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
  }
  .grid-item {
    background-color: lightblue;
    text-align: center;
    padding: 20px;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
</div>

결과: 그리드 컨테이너 안의 자식 요소들이 3개의 열로 정렬됩니다.

2) grid-template-areas

grid-template-areas는 그리드 레이아웃의 영역을 정의하여 이름을 부여합니다. 이를 통해 직관적으로 레이아웃을 구성할 수 있습니다.

<style>
  .grid-container {
    display: grid;
    grid-template-areas: 
      'header header header'
      'sidebar content content'
      'footer footer footer';
    grid-gap: 10px;
  }
  .header { grid-area: header; background-color: lightcoral; }
  .sidebar { grid-area: sidebar; background-color: lightgreen; }
  .content { grid-area: content; background-color: lightblue; }
  .footer { grid-area: footer; background-color: lightpink; }
</style>
<div class="grid-container">
  <div class="header">Header</div>
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

결과: 영역이 지정된 레이아웃이 생성됩니다.

3) grid-auto-flow

grid-auto-flow는 그리드 아이템을 자동으로 배치하는 방식을 설정합니다. row는 행 우선, column은 열 우선 배치를 의미합니다.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-flow: row;
    gap: 10px;
  }
  .grid-item {
    background-color: lightgrey;
    text-align: center;
    padding: 20px;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

결과: 그리드 아이템이 행을 우선으로 배치됩니다.

4) repeat(), minmax() 함수

- repeat(): 반복되는 트랙을 간단하게 정의합니다.
- minmax(): 최소 및 최대 크기를 설정합니다.

<style>
  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: minmax(100px, auto);
    gap: 10px;
  }
  .grid-item {
    background-color: lightyellow;
    text-align: center;
    padding: 20px;
  }
</style>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

결과: 3개의 동일한 열과 최소 100px인 행으로 구성된 그리드가 생성됩니다.

 

05. 실습 예제

1) 간단한 그리드 레이아웃 작성

이 실습 예제에서는 CSS Grid Layout을 사용하여 간단한 웹 페이지 레이아웃을 작성합니다. 이 예제는 헤더, 네비게이션 바, 메인 콘텐츠, 사이드바, 푸터로 구성된 페이지를 만드는 방법을 보여줍니다.

2) 예제 코드와 설명

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>간단한 그리드 레이아웃</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-areas:
                'header header header'
                'nav main sidebar'
                'footer footer footer';
            grid-template-rows: 50px 1fr 30px;
            grid-template-columns: 150px 1fr 150px;
            gap: 10px;
            height: 100vh;
        }
        .header {
            grid-area: header;
            background-color: #2196F3;
            color: white;
            text-align: center;
            padding: 10px;
        }
        .nav {
            grid-area: nav;
            background-color: #8BC34A;
            padding: 10px;
        }
        .main {
            grid-area: main;
            background-color: #FFC107;
            padding: 10px;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: #FF5722;
            padding: 10px;
        }
        .footer {
            grid-area: footer;
            background-color: #795548;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="nav">Navigation</div>
        <div class="main">Main Content</div>
        <div class="sidebar">Sidebar</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

설명:

  • grid-template-areas 속성은 그리드 레이아웃의 이름을 지정하여 쉽게 레이아웃을 구성할 수 있게 합니다.
  • grid-template-rows와 grid-template-columns 속성은 각각 행과 열의 크기를 정의합니다.
  • 각 그리드 아이템은 grid-area 속성을 사용하여 특정 영역에 배치됩니다.

실행 결과:

위 코드를 실행하면 헤더가 상단에, 네비게이션 바가 왼쪽, 메인 콘텐츠가 중앙, 사이드바가 오른쪽에 배치되고, 푸터가 하단에 위치한 웹 페이지 레이아웃이 생성됩니다.

 

06. 결론

1) CSS Grid Layout의 이점과 활용 방법

CSS Grid Layout은 다양한 장치와 화면 크기에 적응하는 유연한 레이아웃을 제공합니다. 복잡한 레이아웃을 단순화하고, 명확한 구조를 통해 유지보수를 쉽게 할 수 있습니다. 요소를 정확하게 정렬하고 배치하여 디자인의 일관성을 유지하고, 반응형 웹 디자인을 쉽게 구현할 수 있습니다.

<style>
  .grid-container {
    display: grid;
    grid-template-areas:
      'header header header'
      'nav main sidebar'
      'footer footer footer';
    grid-template-rows: 50px 1fr 30px;
    grid-template-columns: 150px 1fr 150px;
    gap: 10px;
    height: 100vh;
  }
  .header {
    grid-area: header;
    background-color: #2196F3;
    color: white;
    text-align: center;
    padding: 10px;
  }
  .nav {
    grid-area: nav;
    background-color: #8BC34A;
    padding: 10px;
  }
  .main {
    grid-area: main;
    background-color: #FFC107;
    padding: 10px;
  }
  .sidebar {
    grid-area: sidebar;
    background-color: #FF5722;
    padding: 10px;
  }
  .footer {
    grid-area: footer;
    background-color: #795548;
    color: white;
    text-align: center;
    padding: 10px;
  }
</style>
<div class="grid-container">
  <div class="header">Header</div>
  <div class="nav">Navigation</div>
  <div class="main">Main Content</div>
  <div class="sidebar">Sidebar</div>
  <div class="footer">Footer</div>
</div>

위 코드는 CSS Grid Layout의 유연성과 다양한 활용 방법을 보여줍니다. 이러한 레이아웃을 통해 웹 페이지의 구조를 직관적으로 설계할 수 있습니다.

2) 추가 학습 자료와 참고 링크

CSS Grid Layout은 복잡한 레이아웃을 손쉽게 구성할 수 있는 강력한 도구입니다. 추가 자료를 활용하여 더 많은 실습과 연습을 통해 숙달해보세요.

관련된 다른 글도 읽어보시길 추천합니다

 

2024.07.01 - [Study] - 04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

 

04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초

CSS 선택자와 기본 스타일링 학습: 웹 개발 기초 01. 서론1) CSS란 무엇인가?CSS(캐스케이딩 스타일 시트)는 HTML 요소의 스타일을 정의하는 언어입니다. CSS는 HTML 문서의 외관을 제어하여 웹 페이지

guguuu.com

2024.06.30 - [Study] - 03. HTML 시맨틱 태그 학습 : 웹 페이지 구조와 의미를 명확하게 | 웹 개발 기초

2024.06.28 - [Study] - 02. HTML 폼과 입력 요소 가이드 | 웹 개발 기초

읽어주셔서 감사합니다

공감은 힘이 됩니다

 

:)

반응형
저작자표시 비영리 변경금지

'Study' 카테고리의 다른 글

09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초  (0) 2024.07.09
08. CSS Layout 종합 학습 | 웹 개발 기초  (0) 2024.07.08
06. CSS Flexbox 기초 학습: 유연한 웹 레이아웃 만들기 | 웹 개발 기초  (0) 2024.07.06
05. CSS 박스 모델 학습 | 웹 개발 기초  (0) 2024.07.05
04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초  (0) 2024.07.04

관련글

TOP

Designed by 티스토리

© Kakao Corp.

티스토리툴바