본문 바로가기
Study/CSS

CSS 기초 강의 5편: Grid 레이아웃을 활용한 2차원 레이아웃 구성하기

by wawManager 2024. 11. 20.
728x90

1. Grid 레이아웃 기본 개념

Grid 레이아웃은 **그리드 컨테이너(Grid Container)**와 **그리드 아이템(Grid Item)**으로 구성됩니다.

  • 그리드 컨테이너: display: grid로 정의된 부모 요소로, 그리드 레이아웃을 구성할 수 있게 합니다.
  • 그리드 아이템: 그리드 컨테이너 내부의 자식 요소로, 그리드의 각 셀을 차지합니다.
.container {
    display: grid; /* 그리드 컨테이너 설정 */
}

2. 기본 그리드 설정

1) grid-template-columns와 grid-template-rows

그리드의 열과 행의 크기를 정의합니다. 각각 열과 행의 수를 지정하며, px, %, fr(fraction), auto 등 다양한 단위를 사용할 수 있습니다.

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 3개의 열을 정의 */
    grid-template-rows: 100px 200px;    /* 2개의 행을 정의 */
}
  • fr 단위: 그리드의 남은 공간을 비율로 분할할 때 사용됩니다.
  • px, %, auto: 고정 크기나 비율로 크기를 지정할 수 있습니다.

2) grid-gap

그리드 셀 사이의 간격을 설정합니다. grid-row-gap과 grid-column-gap 속성으로 각각 행과 열의 간격을 따로 지정할 수도 있습니다.

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 10px; /* 모든 셀 사이에 10px 간격 */
}

3. 그리드 아이템 배치

1) grid-column과 grid-row

각 그리드 아이템의 열과 행을 지정하여 위치를 설정합니다.

  • grid-column: start / end: 열의 시작과 끝 위치를 지정합니다.
  • grid-row: start / end: 행의 시작과 끝 위치를 지정합니다.
.item1 {
    grid-column: 1 / 3; /* 첫 번째 열에서 세 번째 열 앞까지 차지 */
    grid-row: 1 / 2;    /* 첫 번째 행을 차지 */
}

예제

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid 예제</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px 100px;
            grid-gap: 10px;
        }

        .item1 {
            background-color: #4CAF50;
            grid-column: 1 / 3; /* 첫 번째 열부터 세 번째 열까지 차지 */
            grid-row: 1 / 2;    /* 첫 번째 행을 차지 */
        }

        .item2 {
            background-color: #2196F3;
        }

        .item3 {
            background-color: #FF5722;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item1">Item 1</div>
        <div class="item2">Item 2</div>
        <div class="item3">Item 3</div>
    </div>
</body>
</html>

 

코드 설명

  • grid-template-columns: 1fr 1fr 1fr: 3개의 열을 동일한 비율로 설정합니다.
  • grid-column: 1 / 3: Item 1이 첫 번째 열부터 세 번째 열까지 가로로 확장됩니다.

4. 그리드 영역 설정 (grid-template-areas)

grid-template-areas 속성은 그리드 컨테이너의 레이아웃을 시각적으로 구성할 수 있게 해 줍니다. 그리드 아이템에 이름을 붙여 grid-area 속성으로 위치를 지정합니다.

예제

.container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 100px 100px;
    grid-template-areas:
        "header header header"
        "sidebar content sidebar";
}

.header {
    grid-area: header;
    background-color: #333;
}

.sidebar {
    grid-area: sidebar;
    background-color: #f4f4f4;
}

.content {
    grid-area: content;
    background-color: #ddd;
}

코드 설명

  • grid-template-areas: 레이아웃을 시각적으로 구성하여 각 아이템의 위치를 직관적으로 설정합니다.
  • grid-area: 각 아이템의 이름을 정의해 그리드 영역에 맞게 배치합니다.

5. CSS Grid 속성 요약

속성설명

display: grid 그리드 컨테이너로 설정
grid-template-columns 열의 크기와 개수를 설정
grid-template-rows 행의 크기와 개수를 설정
grid-gap 그리드 아이템 사이의 간격을 설정
grid-column 아이템의 열 위치를 지정 (start / end 형식)
grid-row 아이템의 행 위치를 지정 (start / end 형식)
grid-template-areas 그리드 영역을 이름으로 구성하여 배치
grid-area grid-template-areas에서 지정한 이름과 아이템을 매칭하여 배치

예제: Grid를 활용한 레이아웃 구성

아래는 Grid 레이아웃을 사용하여 웹 페이지 구조를 구성한 예제입니다.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Grid 레이아웃</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto 1fr auto;
            grid-template-areas:
                "header header"
                "sidebar content"
                "footer footer";
            gap: 10px;
            height: 100vh;
        }

        .header {
            grid-area: header;
            background-color: #4CAF50;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .sidebar {
            grid-area: sidebar;
            background-color: #f4f4f4;
            padding: 20px;
        }

        .content {
            grid-area: content;
            background-color: #ddd;
            padding: 20px;
        }

        .footer {
            grid-area: footer;
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="content">Content</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

코드 설명

  • grid-template-areas를 사용하여 header, sidebar, content, footer 영역을 쉽게 정의했습니다.
  • 각 영역은 grid-area 속성으로 이름을 지정해 배치했습니다.

요약

이번 강의에서는 CSS Grid 레이아웃의 기본 개념과 속성들을 학습했습니다. Grid 레이아웃을 활용하면 복잡한 2차원 레이아웃을 쉽게 구성할 수 있으며, 다양한 화면 크기에서도 유연하게 디자인을 조정할 수 있습니다. 다음 강의에서는 반응형 웹 디자인과 미디어 쿼리를 통해 다양한 디바이스 환경에서도 잘 동작하는 웹 페이지를 만드는 방법을 알아보겠습니다.

728x90

'Study > CSS' 카테고리의 다른 글

CSS 기초 강의 7편: CSS 애니메이션과 트랜지션으로 시각 효과 만들기  (0) 2024.11.22
CSS 기초 강의 6편: 반응형 웹 디자인과 미디어 쿼리  (0) 2024.11.21
CSS 기초 강의 4편: Flexbox를 사용한 유연한 레이아웃 구성하기  (0) 2024.11.19
CSS 기초 강의 3편: CSS 레이아웃 기초와 박스 모델  (0) 2024.11.18
CSS 기초 강의 2편: CSS 선택자와 우선순위  (1) 2024.11.17

관련글

티스토리툴바