Post

CSS) Flexbox와 Grid에 대해 알아보자

Posted Updated
Preview Image
By parksohyunnn 9 min read

CSS Flexbox와 Grid: 정의, 차이점, 사용법, 장단점 비교

CSS는 웹 페이지의 스타일을 정의하는 데 중요한 역할을 합니다. CSS 레이아웃 모델 중 Flexbox와 Grid는 각각 유연하고 강력한 레이아웃을 제공하여, 다양한 디자인 요구 사항을 충족할 수 있습니다. 이 글에서는 Flexbox와 Grid의 정의와 차이점, 사용법, 그리고 장단점을 비교하여 살펴보겠습니다.

Flexbox: 정의 및 사용법

정의

Flexbox(Flexible Box Layout)는 1차원 레이아웃 모델로, 주로 단일 행이나 열에서 아이템을 배치하고 정렬하는 데 사용됩니다. Flexbox는 컨테이너 내부의 아이템 크기와 위치를 유연하게 조정할 수 있어 복잡한 레이아웃을 쉽게 구현할 수 있습니다.

사용법

Flexbox는 display: flex;를 사용하여 설정합니다. 주로 사용되는 속성과 값은 다음과 같습니다:

컨테이너 속성

  1. display: flex 또는 inline-flex로 설정하여 Flexbox 컨테이너를 정의합니다.
  2. flex-direction: 주 축을 설정합니다. 기본값은 row이며, column, row-reverse, column-reverse도 사용 가능합니다.
  3. flex-wrap: 아이템이 한 줄에 모두 배치되지 않을 때 줄바꿈을 설정합니다. 기본값은 nowrap이며, wrap, wrap-reverse가 있습니다.
  4. justify-content: 주 축을 기준으로 아이템을 정렬합니다. 값으로는 flex-start, flex-end, center, space-between, space-around, space-evenly가 있습니다.
  5. align-items: 교차 축을 기준으로 아이템을 정렬합니다. 값으로는 flex-start, flex-end, center, baseline, stretch가 있습니다. align-content: 여러 줄의 아이템을 교차 축 기준으로 정렬합니다. 값으로는 flex-start, flex-end, center, space-between, space-around, stretch가 있습니다.

아이템 속성

  1. order: 아이템의 순서를 설정합니다. 기본값은 0입니다.
  2. flex-grow: 남은 공간을 아이템이 차지할 수 있는 비율을 설정합니다. 기본값은 0입니다.
  3. flex-shrink: 아이템이 줄어들 수 있는 비율을 설정합니다. 기본값은 1입니다.
  4. flex-basis: 아이템의 기본 크기를 설정합니다. 기본값은 auto입니다.
  5. align-self: 개별 아이템의 교차 축 정렬을 설정합니다. 값으로는 auto, flex-start, flex-end, center, baseline, stretch가 있습니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            align-items: center;
            height: 100vh;
        }
        .flex-item {
            background-color: lightcoral;
            padding: 20px;
            margin: 10px;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>

Grid: 정의 및 사용법

정의

CSS Grid Layout은 2차원 레이아웃 모델로, 행(row)과 열(column)을 기반으로 아이템을 배치할 수 있습니다. Grid는 복잡한 레이아웃을 간편하게 정의할 수 있으며, Flexbox보다 더 강력한 레이아웃 컨트롤을 제공합니다.

사용법

Grid는 display: grid;를 사용하여 설정합니다. 주로 사용되는 속성과 값은 다음과 같습니다:

컨테이너 속성

  1. display: grid 또는 inline-grid로 설정하여 Grid 컨테이너를 정의합니다.
  2. grid-template-columns: 열의 크기와 개수를 설정합니다. 예: grid-template-columns: 100px 1fr;
  3. grid-template-rows: 행의 크기와 개수를 설정합니다. 예: grid-template-rows: 50px auto;
  4. grid-gap: 행과 열 사이의 간격을 설정합니다. grid-row-gap과 grid-column-gap으로 개별 설정도 가능합니다.
  5. justify-items: 각 셀의 가로 정렬을 설정합니다. 값으로는 start, end, center, stretch가 있습니다.
  6. align-items: 각 셀의 세로 정렬을 설정합니다. 값으로는 start, end, center, stretch가 있습니다.

아이템 속성

  1. grid-column-start / grid-column-end: 아이템이 시작하고 끝나는 열을 설정합니다. 예: grid-column: 1 / 3;
  2. grid-row-start / grid-row-end: 아이템이 시작하고 끝나는 행을 설정합니다. 예: grid-row: 1 / 2;
  3. justify-self: 개별 아이템의 가로 정렬을 설정합니다. 값으로는 start, end, center, stretch가 있습니다.
  4. align-self: 개별 아이템의 세로 정렬을 설정합니다. 값으로는 start, end, center, stretch가 있습니다.

예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr;
            grid-template-rows: auto;
            gap: 10px;
            height: 100vh;
        }
        .grid-item {
            background-color: lightseagreen;
            padding: 20px;
            margin: 10px;
            color: white;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
    </div>
</body>
</html>

Flexbox vs Grid: 차이점

레이아웃 차원

  • Flexbox: 1차원 레이아웃 (행 또는 열)
  • Grid: 2차원 레이아웃 (행과 열)

용도

  • Flexbox: 단일 행 또는 열에서 아이템을 배치하고 정렬할 때 적합
  • Grid: 복잡한 2차원 레이아웃을 정의할 때 적합

정렬

  • Flexbox: 주 축과 교차 축을 기준으로 아이템 정렬
  • Grid: 셀을 기준으로 아이템 배치 및 정렬

공간 분할

  • Flexbox: 주 축을 따라 공간을 나누고 아이템을 배치
  • Grid: 행과 열을 기준으로 공간을 나누고 아이템을 배치

Flexbox의 장단점

장점

  • 유연성: 아이템의 크기와 위치를 유연하게 조정할 수 있습니다.
  • 간편함: 간단한 레이아웃을 쉽게 구현할 수 있습니다. 브라우저 호환성: 대부분의 현대 브라우저에서 잘 지원됩니다.

단점

  • 제한된 차원: 1차원 레이아웃에 적합하므로 복잡한 2차원 레이아웃에는 제한적입니다.
  • 복잡한 레이아웃: 복잡한 레이아웃을 구성하려면 여러 컨테이너를 중첩해야 합니다.

Grid의 장단점

장점

강력한 2차원 레이아웃: 행과 열을 기준으로 복잡한 레이아웃을 쉽게 구현할 수 있습니다.

  • 명확한 구조: 코드에서 레이아웃의 구조를 명확하게 표현할 수 있습니다.
  • 다양한 기능: 그리드 영역, 이름 지정, 레이아웃 재정의 등 다양한 기능을 제공합니다.

단점

  • 초기 학습 곡선: 처음 사용할 때는 다소 복잡하게 느껴질 수 있습니다.
  • 브라우저 호환성: 모든 브라우저에서 완벽히 지원하지 않을 수 있습니다
CSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github