Grid
λ°μν λ μ΄μμμ ꡬμΆνκΈ° μν 그리λ μμ€ν
μ μ 곡ν©λλ€.
β’
그리λ μμ€ν
μ΄λ?
β’
ꡬμ±μμ
β’
λ°μν λμμΈ
β’
νΉμ§
β’
ν΄λμ€
β’
μμμ½λ
그리λ μμ€ν μ΄λ?
그리λ μμ€ν
μ μΉ λμμΈκ³Ό λ μ΄μμμμ μ½ν
μΈ λ₯Ό μ λ ¬νκ³ λ°°μΉνλ λ° μ¬μ©λλ ꡬ쑰μ μμ€ν
μ
λλ€.
ꡬμ±μμ
β’
ν(Row)
β’
μ΄(Column)
β’
κ±°ν°(Gutter)
β’
λ¨μ§(Margin)
λ°μν λμμΈ
μΉ νμ΄μ§κ° λ€μν νλ©΄ ν¬κΈ°μ μ₯μΉ(λ°μ€ν¬ν, νλΈλ¦Ώ, λͺ¨λ°μΌ λ±)μμ μ΅μ μ μ¬μ©μ κ²½νμ μ 곡νλλ‘ μ€κ³λ λμμΈ μ κ·Ό λ°©μμ
λλ€.
λ°μν λμμΈμ λ μ΄μμ, μ΄λ―Έμ§, κΈκΌ΄ ν¬κΈ° λ±μ νλ©΄ ν¬κΈ°μ λ§κ² μλμΌλ‘ μ‘°μ νμ¬ μ¬μ©μκ° μ΄λ€ μ₯μΉλ₯Ό μ¬μ©νλ μ§ μΌκ΄λ κ²½νμ μ 곡ν©λλ€.
μλ μ£Όμ κ°λ
λ€μ ν΅ν΄μ, λΆνΈμ€νΈλ©μ 그리λ μμ€ν
μ μ¬μ©νλ©΄ λ°μν λμμΈμ μ½κ² μ μ©ν μ μμ΅λλ€.
μ£Όμ κ°λ
1.
컨ν
μ΄λ (Container):
β’
.container: κ³ μ ν 컨ν
μ΄λλ‘, νλ©΄ ν¬κΈ°μ λ°λΌ μ΅λ λλΉκ° μ‘°μ λ©λλ€.
β’
.container-fluid: μ 체 λλΉ μ»¨ν
μ΄λλ‘, νμ 100% λλΉλ₯Ό κ°μ§λλ€.
2.
ν (Row):
β’
.rowΒ ν΄λμ€λ₯Ό μ¬μ©νμ¬ κ·Έλ¦¬λ νμ λ§λλλ€. νμ μ΄μ ν¬ν¨νλ μν μ ν©λλ€.
3.
μ΄ (Column):
β’
.colΒ ν΄λμ€λ₯Ό μ¬μ©νμ¬ κ·Έλ¦¬λ μ΄μ λ§λλλ€. μ΄μ ν λ΄μμ μ½ν
μΈ λ₯Ό λ°°μΉνλ λ° μ¬μ©λ©λλ€.
β’
μ΄μ 12κ°μ κΈ°λ³Έ μ΄λ‘ ꡬμ±λλ©°, νλ©΄ ν¬κΈ°μ λ°λΌ μ΄μ λλΉλ₯Ό μ‘°μ ν μ μμ΅λλ€.
νΉμ§
β’
μΌλ ¨μ νκ³Ό μ΄λ‘ ꡬμ±λμ΄ μμΌλ©°, μ½ν
μΈ λ₯Ό μ½κ² λ°°μΉνκ³ μ λ ¬ν μ μλλ‘ λμμ€λλ€.
β’
μΌκ΄λ λ μ΄μμμ μ μ§νκ³ , λ€μν νλ©΄ ν¬κΈ°μ μ₯μΉμμ λ°μν λμμΈμ ꡬν κ°λ₯νκ² ν΄μ€λλ€.
1.
ν(Row):
그리λ μμ€ν
μμ νμ μ΄μ ν¬ν¨νλ κΈ°λ³Έ λ¨μμ
λλ€.
β’
νμ 그리λ μμ€ν
μ κΈ°λ³Έ λ¨μλ‘, μ΄μ ν¬ν¨νλ μν μ ν©λλ€.
β’
νμ μνμΌλ‘ λ°°μΉλλ©°, μ΄μ μ λ ¬νκ³ λ°°μΉνλ λ° μ¬μ©λ©λλ€.
2.
μ΄(Column):
그리λ μμ€ν
μμ μ΄μ ν λ΄μμ μ½ν
μΈ λ₯Ό λ°°μΉνλ λ¨μμ
λλ€.
β’
μ΄μ ν λ΄μμ μ½ν
μΈ λ₯Ό λ°°μΉνλ λ° μ¬μ©λ©λλ€.
β’
μ΄μ μμ§μΌλ‘ λ°°μΉλλ©°, ν λ΄μμ μ½ν
μΈ λ₯Ό μ λ ¬νκ³ λ°°μΉνλ λ° μ¬μ©λ©λλ€.
β’
μ΄μ μΌλ°μ μΌλ‘ 12κ°μ κΈ°λ³Έ μ΄λ‘ ꡬμ±λλ©°, νλ©΄ ν¬κΈ°μ λ°λΌ λλΉλ₯Ό μ‘°μ ν μ μμ΅λλ€.
3.
κ±°ν°(Gutter)
그리λ μμ€ν
μμ μ΄(column) μ¬μ΄μ κ°κ²©μ μλ―Έν©λλ€.
β’
μ¬μ©λ²
β¦
.g-0λΆν°Β .g-5κΉμ§μ ν΄λμ€λ₯Ό μ¬μ©νμ¬Β gapΒ ν¬κΈ°λ₯Ό μ€μ ν μ μμ΅λλ€.
ν΄λμ€ | κ°κ²© (rem) |
g-0 | 0 (0rem) |
g-1 | 0.25rem |
g-2 | 0.5rem |
g-3 | 1rem |
g-4 | 1.5rem |
g-5 | 3rem |
β¦
.gx-* .gy-*Β ν΄λμ€λ₯Ό μ¬μ©νμ¬ μνΒ gapμ μ€μ ν μ μμ΅λλ€.
ν΄λμ€ | μ€λͺ
|
.gx-* | μ’μ°Β gap |
.gy-* | μνΒ gap |
4.
λ§μ§(Margin)
그리λ μμ€ν
μμ λ§μ§(margin)μ ν ν μμͺ½ λμ μ¬λ°±μ μλ―Έν©λλ€.
β’
μ¬μ©λ²
β¦
.m-0λΆν°Β .m-5κΉμ§μ ν΄λμ€λ₯Ό μ¬μ©νμ¬Β marginμ μ‘°μ ν μ μμ΅λλ€.
ν΄λμ€ | κ°κ²© (rem) |
m-0 | 0 (0rem) |
m-1 | 0.25rem |
m-2 | 0.5rem |
m-3 | 1rem |
m-4 | 1.5rem |
m-5 | 3rem |
β¦
λ°©ν₯λ³λ‘Β marginμ μ€μ ν μ μλ ν΄λμ€λ μμ΅λλ€.
ν΄λμ€ | μ€λͺ
|
mt-* | μλ¨Β margin |
mb-* | νλ¨Β margin |
ml-* | μΌμͺ½Β margin |
mr-* | μ€λ₯Έμͺ½Β margin |
mx-* | μ’μ°Β margin |
my-* | μνΒ margin |
λ°μν λμμΈ
β’
그리λ μμ€ν
μ λ€μν νλ©΄ ν¬κΈ°μ μ₯μΉμμ μΌκ΄λ λ μ΄μμμ μ μ§ν μ μλλ‘ λμμ€λλ€.
β’
λ°μν λμμΈμ ν΅ν΄ μ½ν
μΈ κ° νλ©΄ ν¬κΈ°μ λ§κ² μλμΌλ‘ μ‘°μ λ©λλ€.
ν΄λμ€
ν΄λμ€ | μν | μ¬μ©λ² | νΉμ§ |
.row | ν μ μ | <div class="row"></div> | - μ΄(.col)μ ν¬ν¨<br>- μΌμͺ½κ³Ό μ€λ₯Έμͺ½μ -15px λ§μ§<br>- λ΄λΆ μ΄μ 15px ν¨λ© |
.col | μ΄ μ μ | <div class="col"></div> | - 12κ°μ κΈ°λ³Έ μ΄<br>- λ°μν λλΉ μ‘°μ <br>- λ€μν νλ©΄ ν¬κΈ° ν΄λμ€ μ¬μ© κ°λ₯<br>- μ€μ²© κ°λ₯ |
μμ± | Extra small (xs) <576px | Small (sm) β₯576px | Medium (md) β₯768px | Large (lg) β₯992px | X-Large (xl) β₯1200px | XX-Large (xxl) β₯1400px |
Container
max-width | None (auto) | 540px | 720px | 960px | 1140px | 1320px |
Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- | .col-xxl- |
# of columns | 12 | 12 | 12 | 12 | 12 | 12 |
Gutter width | 1.5rem | (.75rem on left and right) | ββ | ββ | ββ | ββ |
Custom gutters | Yes | Yes | Yes | Yes | Yes | Yes |
Nestable | Yes | Yes | Yes | Yes | Yes | Yes |
Column ordering | Yes | Yes | Yes | Yes | Yes | Yes |
μμμ½λ
β’
Extra small (xs):Β <576pxΒ -Β .col-
β’
Small (sm):Β β₯576pxΒ -Β .col-sm-
β’
Medium (md):Β β₯768pxΒ -Β .col-md-
β’
Large (lg):Β β₯992pxΒ -Β .col-lg-
β’
X-Large (xl):Β β₯1200pxΒ -Β .col-xl-
β’
XX-Large (xxl):Β β₯1400pxΒ -Β .col-xxl-
XX-Large (xxl):Β β₯1400pxΒ -Β .col-xxl-1
X-Large (xl):Β β₯1200pxΒ -Β .col-xl-2
Large (lg):Β β₯992pxΒ -Β .col-lg-3
Medium (md):Β β₯768pxΒ -Β .col-md-4
Small (sm):Β β₯576pxΒ -Β .col-sm-6
Extra small (xs):Β <576pxΒ -Β .col-12
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 그리λ μμ </title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<style>
.col {
border: 1px solid #ddd;
padding: 20px;
text-align: center;
}
.card { font-size: 30px; }
.mh-100 {
min-height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
1
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
2
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
3
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
4
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
5
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
6
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
7
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
8
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
9
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
10
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
11
</div>
<div class="card col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 col-xxl-1 mh-100">
12
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
HTML
볡μ¬
μ½λ μ€λͺ
β’
컨ν
μ΄λ(Container):Β .containerΒ ν΄λμ€λ₯Ό μ¬μ©νμ¬ κ³ μ ν 컨ν
μ΄λλ₯Ό λ§λλλ€.
β’
ν(Row):Β .rowΒ ν΄λμ€λ₯Ό μ¬μ©νμ¬ νμ λ§λλλ€.
β’
μ΄(Column):Β .colΒ ν΄λμ€λ₯Ό μ¬μ©νμ¬ μ΄μ λ§λλλ€. μ΄ μμ μμλ κ° μ΄μ΄ νλ©΄ ν¬κΈ°μ λ°λΌ λ€λ₯΄κ² λ°°μΉλ©λλ€.
β¦
col-12: Extra small νλ©΄μμλ κ° μ΄μ΄ μ 체 λλΉλ₯Ό μ°¨μ§ν©λλ€.
β¦
col-sm-6: Small νλ©΄μμλ κ° μ΄μ΄ λλΉμ μ λ°μ μ°¨μ§ν©λλ€.
β¦
col-md-4: Medium νλ©΄μμλ κ° μ΄μ΄ λλΉμ 3λΆμ 1μ μ°¨μ§ν©λλ€.
β¦
col-lg-3: Large νλ©΄μμλ κ° μ΄μ΄ λλΉμ 4λΆμ 1μ μ°¨μ§ν©λλ€.
β¦
col-xl-2: X-Large νλ©΄μμλ κ° μ΄μ΄ λλΉμ 6λΆμ 1μ μ°¨μ§ν©λλ€.
β¦
col-xxl-1: XX-Large νλ©΄μμλ κ° μ΄μ΄ λλΉμ 12λΆμ 1μ μ°¨μ§ν©λλ€.