Flexbox, Grid 및 Column 레이아웃 비교
이 글은 Flexbox, Grid 및 Column 레이아웃의 비교를 설명합니다.
Flexbox, Grid 및 Column 레이아웃의 차이점과 각각을 언제 사용하는지 배울 수 있습니다.
YouTube Video
미리보기를 위한 HTML
css-layout-comparision.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Properties Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-layout-comparision.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Properties For Layout</h1>
14 </header>
15 <!-- Main content -->
16 <main>
17 <header>
18 <h2>Layout Comparision</h2>
19 </header>
20 <article>
21 <h3>flex</h3>
22 <section>
23 <section class="sample-view">
24 <div class="flex-container">
25 <div class="flex-item">Item 1</div>
26 <div class="flex-item">Item 2</div>
27 <div class="flex-item">Item 3</div>
28 <div class="flex-item">Item 4</div>
29 <div class="flex-item">Item 5</div>
30 <div class="flex-item">Item 6</div>
31 <div class="flex-item">Item 7</div>
32 <div class="flex-item">Item 8</div>
33 <div class="flex-item">Item 9</div>
34 </div>
35 </section>
36 </section>
37 </article>
38 <article>
39 <h3>grid</h3>
40 <section>
41 <section class="sample-view">
42 <div class="grid-box">
43 <div class="grid-item item1">Item 1</div>
44 <div class="grid-item item2">Item 2</div>
45 <div class="grid-item item3">Item 3</div>
46 <div class="grid-item item4">Item 4</div>
47 <div class="grid-item item5">Item 5</div>
48 <div class="grid-item item6">Item 6</div>
49 <div class="grid-item item7">Item 7</div>
50 <div class="grid-item item8">Item 8</div>
51 <div class="grid-item item9">Item 9</div>
52 </div>
53 </section>
54 </section>
55 </article>
56 <article>
57 <h3>column</h3>
58 <section>
59 <section class="sample-view">
60 <section class="columns-container">
61 <p class="columns-item">Item 1</p>
62 <p class="columns-item">Item 2</p>
63 <p class="columns-item">Item 3</p>
64 <p class="columns-item">Item 4</p>
65 <p class="columns-item">Item 5</p>
66 <p class="columns-item">Item 6</p>
67 <p class="columns-item">Item 7</p>
68 <p class="columns-item">Item 8</p>
69 <p class="columns-item">Item 9</p>
70 </section>
71 </section>
72 </section>
73 </article>
74 </main>
75</body>
76</html>Flexbox, Grid 및 Column 레이아웃 비교
CSS의 flex, grid, columns는 모두 요소를 정렬하고 배치하는 기술이지만 각각 고유한 강점과 적합한 사용 사례가 있습니다. 아래는 비교를 통해 명확하게 설명한 차이점입니다.
Flexbox（display: flex）
1.flex-container {
2 display: flex;
3 justify-content: space-between;
4 align-items: center;
5 flex-wrap: wrap;
6 background-color: lightblue;
7 height: 200px;
8}
9
10.flex-item {
11 background-color: lightskyblue;
12 padding: 10px;
13 margin: 5px;
14 width: 70px;
15 height: auto;
16}기능
- 단방향 레이아웃—가로 또는 세로 레이아웃에 적합합니다.
- 요소의 순서와 유연성을 유연하게 제어할 수 있습니다.
- 탐색 바 및 버튼 그룹과 같은 소규모 레이아웃에 가장 적합합니다.
장점
- 자식 요소의 크기를 자동으로 조정합니다.
flex-direction,flex-wrap,order와 같은 속성을 사용하여 요소의 순서를 변경할 수 있습니다.
표시 순서 변경 예시
표시 순서를 변경하는 예로, flex-direction 속성을 column으로 설정해봅시다.
1.flex-container {
2 flex-direction: column;
3}flex-direction이 column으로 설정되면 항목이 가로 레이아웃에서 세로 레이아웃으로 변경됩니다. 레이아웃이 왼쪽에서 오른쪽으로에서 위에서 아래로 변경됩니다.
Grid（display: grid）
1.grid-box {
2 display: grid;
3 grid-template-columns: 100px 100px 100px;
4 grid-template-rows: 50px 50px 50px;
5 gap: 20px;
6 background-color: lightblue;
7 border: none;
8 height: 200px;
9}
10
11.grid-item {
12 background-color: lightskyblue;
13 width: 100%;
14 padding: 0;
15 text-align: center;
16}기능
- 2차원 레이아웃에 적합합니다.
- 그리드 기반 레이아웃을 명확히 정의할 수 있습니다.
- 더 복잡한 디자인과 전체 페이지 구조에 적합합니다.
장점
- 행과 열을 동시에 정의할 수 있습니다.
- 이름 지정된 영역(
grid-area)을 사용하여 섹션을 배치할 수 있습니다. - 그리드 내에서 자식 요소를 자유롭게 배치할 수 있어 유연한 순서 제어가 가능합니다.
표시 순서 변경 예시
표시 순서를 변경하는 예로, grid-template-areas 속성을 사용하여 표시 위치를 설정해봅시다.
1.grid-box {
2 grid-template-areas:
3 "item1 item4 item5"
4 "item2 item6 item7"
5 "item3 item8 item9";
6}
7
8.item1 { grid-area: item1; }
9.item2 { grid-area: item2; }
10.item3 { grid-area: item3; }
11.item4 { grid-area: item4; }
12.item5 { grid-area: item5; }
13.item6 { grid-area: item6; }
14.item7 { grid-area: item7; }
15.item8 { grid-area: item8; }
16.item9 { grid-area: item9; }보시다시피, grid는 표시 순서를 변경하는 것뿐만 아니라 독특한 레이아웃을 만드는 데에도 사용할 수 있습니다.
Columns（column-count, column-width）
1.columns-container {
2 background-color: lightblue;
3 columns: 100px 3;
4 column-gap: 20px;
5 column-rule: 2px solid #333;
6 padding: 10px;
7}
8
9.columns-item {
10 background-color: lightskyblue;
11 text-align: center;
12 margin: 20px auto;
13 color: white;
14 display: flex;
15 align-items: center;
16 justify-content: center;
17 font-size: 1.2rem;
18 border: 1px solid #ccc;
19 height: 50px;
20}기능
- 간단히 잡지 스타일의 컬럼을 만들 수 있습니다.
- 문맥 흐름이 있는 텍스트 콘텐츠에 적합합니다.
- HTML 소스 순서를 따르므로 요소 순서 제어에는 적합하지 않습니다.
장점
- 긴 텍스트를 자동으로 나눌 수 있습니다.
- 아주 쉽게 신문 스타일의 레이아웃을 만들 수 있습니다.
비교 표
| 특징 / 활용 사례 | 플렉스박스 | 그리드 | 컬럼 |
|---|---|---|---|
| 레이아웃 차원 | 1D (수평 또는 수직) | 2D (수평 및 수직) | 1D (수직) |
| 가장 적합한 경우 | 요소 정렬 | 전체 페이지 구조 | 다중 열 텍스트 |
| 레이아웃 유연성 | 높음 (순서 및 크기) | 매우 높음 (영역 정의) | 낮음 (자동 분할만 가능) |
| 자식 요소 제어 | 유연함 | 명확히 정의됨 | 제어가 어렵다 |
| 레이아웃 의도 | 콘텐츠 중심 | 레이아웃 중심 | 텍스트 중심 |
요약
- 플렉스박스는 헤더나 카드 리스트처럼 요소를 한 줄에 정렬하고 싶을 때 이상적입니다.
- 그리드는 웹 페이지 구조처럼 전체 레이아웃을 설계하고 싶을 때 적합합니다.
- 컬럼은 기사나 블로그처럼 텍스트를 다중 열로 포맷팅하고 싶을 때 가장 적합합니다.
또한 필요에 따라 이들을 조합할 수도 있습니다. 예를 들어, Grid를 사용하여 전체 레이아웃을 설계하고 Flex로 내부 요소를 정렬할 수 있습니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.