Search

Grid

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을 μ°¨μ§€ν•©λ‹ˆλ‹€.