CSS Gridμ μμμ λͺ λͺ λ λΌμΈμ νμνμ¬ λ μ΄μμ μμ± λ° μ μ§ κ΄λ¦¬λ₯Ό κ°μννλ κ°λ ₯ν κΈ°λ₯μ λλ€. μμμ λͺ λͺ μ΄ CSSλ₯Ό λ¨μννκ³ κΈλ‘λ² μΉ κ°λ°μ κ°λ μ±μ ν₯μμν€λ λ°©λ²μ μμ보μΈμ.
CSS Grid μμμ λͺ λͺ λ λΌμΈμ ν νμ©: λ¨μνλ λ μ΄μμ
CSS Gridλ λΉκ΅ν μ μλ μ μ΄ λ° μ μ°μ±μ μ 곡νμ¬ μΉ λ μ΄μμμ νλͺ μ μΌμΌμΌ°μ΅λλ€. 그리λ λΌμΈμ λͺ μμ μΌλ‘ μ μνλ©΄ μμ²λ νμ μ»μ μ μμ§λ§ CSS Gridλ λ³΄λ€ κ°μνλ μ κ·Ό λ°©μμΈ μμμ λͺ λͺ λ λΌμΈλ μ 곡ν©λλ€. μ΄ κΈ°λ₯μ 그리λ νΈλ μ΄λ¦μ κΈ°λ°μΌλ‘ μλμΌλ‘ λΌμΈ μ΄λ¦μ μμ±νμ¬ CSSλ₯Ό λ¨μννκ³ κ°λ μ±μ ν₯μμν΅λλ€. μ΄λ λͺ μμ λΌμΈ μ΄λ¦ μ μ§κ° λ²κ±°λ‘μμ§ μ μλ ν¬κ³ 볡μ‘ν νλ‘μ νΈμ νΉν μ μ©ν©λλ€.
CSS Grid κΈ°λ³Έ μ¬ν μ΄ν΄
μμμ λͺ
λͺ
λ λΌμΈμ λν΄ μμΈν μμ보기 μ μ CSS Gridμ κΈ°λ³Έ μ¬νμ κ°λ΅νκ² λ³΅μ΅ν΄ λ³΄κ² μ΅λλ€. CSS Grid λ μ΄μμμ 그리λ 컨ν
μ΄λμ 그리λ νλͺ©μΌλ‘ ꡬμ±λ©λλ€. 그리λ 컨ν
μ΄λλ grid-template-columns λ° grid-template-rowsμ κ°μ μμ±μ μ¬μ©νμ¬ κ·Έλ¦¬λ ꡬ쑰λ₯Ό μ μν©λλ€. κ·Έλ° λ€μ grid-column-start, grid-column-end, grid-row-start λ° grid-row-endμ κ°μ μμ±μ μ¬μ©νμ¬ κ·Έλ¦¬λ νλͺ©μ μ΄ κ·Έλ¦¬λ λ΄μ λ°°μΉν©λλ€.
μ£Όμ 그리λ μμ±:
grid-template-columns: 그리λμ μ΄μ μ μν©λλ€.grid-template-rows: 그리λμ νμ μ μν©λλ€.grid-template-areas: λͺ λͺ λ 그리λ μμμ μ¬μ©νμ¬ κ·Έλ¦¬λ λ μ΄μμμ μ μν©λλ€.grid-column-gap: μ΄ μ¬μ΄μ κ°κ²©μ μ§μ ν©λλ€.grid-row-gap: ν μ¬μ΄μ κ°κ²©μ μ§μ ν©λλ€.grid-gap:grid-row-gapλ°grid-column-gapμ μ½μΉμ λλ€.grid-column-start: 그리λ νλͺ©μ μμ μ΄ λΌμΈμ μ§μ ν©λλ€.grid-column-end: 그리λ νλͺ©μ λ μ΄ λΌμΈμ μ§μ ν©λλ€.grid-row-start: 그리λ νλͺ©μ μμ ν λΌμΈμ μ§μ ν©λλ€.grid-row-end: 그리λ νλͺ©μ λ ν λΌμΈμ μ§μ ν©λλ€.
μμμ λͺ λͺ λ λΌμΈμ΄λ 무μμ λκΉ?
μμμ λͺ
λͺ
λ λΌμΈμ grid-template-columns λ° grid-template-rowsμμ 그리λ νΈλ(ν λ° μ΄)μ ν λΉνλ μ΄λ¦μ κΈ°λ°μΌλ‘ CSS Gridμμ μλμΌλ‘ μμ±λ©λλ€. 그리λ νΈλ μ΄λ¦μ μ§μ νλ©΄ CSS Gridλ νΈλ μμκ³Ό λμ κ°κ° νλμ© λ κ°μ μμμ λͺ
λͺ
λ λΌμΈμ λ§λλλ€. μ΄λ¬ν λΌμΈμ μ΄λ¦μ νΈλ μ΄λ¦μμ νμλλ©° κ°κ° -start λ° -end μ λμ¬κ° λΆμ΅λλ€.
μλ₯Ό λ€μ΄ sidebarλΌλ μ΄ νΈλμ μ μνλ©΄ CSS Gridλ μλμΌλ‘ sidebar-start λ° sidebar-endλΌλ λ κ°μ μμμ λͺ
λͺ
λ λΌμΈμ λ§λλλ€. κ·Έλ° λ€μ μ΄λ¬ν λΌμΈμ μ¬μ©νμ¬ κ·Έλ¦¬λ νλͺ©μ μμΉλ₯Ό μ§μ ν μ μμΌλ―λ‘ λΌμΈ λ²νΈ λλ μ¬μ©μ μ μ λΌμΈ μ΄λ¦μ λͺ
μμ μΌλ‘ μ μν νμκ° μμ΅λλ€.
μμμ λͺ λͺ λ λΌμΈ μ¬μ©μ μ΄μ
μμμ λͺ λͺ λ λΌμΈμ κΈ°μ‘΄ 그리λ λ μ΄μμ κΈ°μ μ λΉν΄ λͺ κ°μ§ μ₯μ μ μ 곡ν©λλ€.
- λ¨μνλ CSS: μμμ λͺ λͺ λ λΌμΈμ νμν CSS μ½λμ μμ μ€μ¬ μ€νμΌμνΈλ₯Ό λ κΉλνκ³ μ μ§ κ΄λ¦¬νκΈ° μ½κ² λ§λλλ€.
- ν₯μλ κ°λ μ±: μλ―Έ μλ νΈλ μ΄λ¦κ³Ό μμμ λΌμΈμ μ¬μ©νλ©΄ 그리λ λ μ΄μμμ΄ μ체 λ¬Έμνλκ³ μ΄ν΄νκΈ° μ¬μμ§λλ€. μ΄λ μ½λ λͺ νμ±μ΄ κ°μ₯ μ€μν λ€μν μΈμ΄ λ₯λ ₯μ κ°μΆ κΈλ‘λ² νμ νμ μ λ§€μ° μ€μν©λλ€.
- μ€λ₯ κ°μ: μλ λΌμΈ μ΄λ¦ μμ±μ μμ‘΄νλ©΄ 그리λ μ μμμ μ€ν λ° λΆμΌμΉ μνμ μ΅μνν μ μμ΅λλ€.
- ν₯μλ μ μ°μ±: μμμ λͺ λͺ λ λΌμΈμ μ¬μ©νλ©΄ μλ§μ λΌμΈ λ²νΈ λλ μ¬μ©μ μ μ λΌμΈ μ΄λ¦μ μ λ°μ΄νΈνμ§ μκ³ λ 그리λ λ μ΄μμμ λ μ½κ² μμ ν μ μμ΅λλ€.
μμμ λͺ λͺ λ λΌμΈμ μ€μ μ
μμμ λͺ λͺ λ λΌμΈμ μ¬μ©νμ¬ μΌλ°μ μΈ λ μ΄μμ ν¨ν΄μ λ§λλ λ°©λ²μ μ€λͺ νκΈ° μν΄ λͺ κ°μ§ μ€μ μλ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€.
μ 1: κΈ°λ³Έ 2μ΄ λ μ΄μμ
μ¬μ΄λλ°μ μ£Ό μ½ν μΈ μμμ΄ μλ κ°λ¨ν 2μ΄ λ μ΄μμμ κ³ λ €ν΄ λ³΄μΈμ.
.container {
display: grid;
grid-template-columns: [sidebar] 200px [main] 1fr;
}
.sidebar {
grid-column: sidebar;
}
.main-content {
grid-column: main;
}
μ΄ μμμλ 첫 λ²μ§Έ μ΄ νΈλ μ΄λ¦μ sidebarλ‘, λ λ²μ§Έ μ΄ νΈλ μ΄λ¦μ mainμΌλ‘ μ§μ νμ΅λλ€. CSS Gridλ μλμΌλ‘ λ€μ μμμ λͺ
λͺ
λ λΌμΈμ λ§λλλ€.
sidebar-start(sidebarμ΄μ μμ λΆλΆ)sidebar-end(sidebarμ΄μ λ λΆλΆ,mainμ΄μ μμ λΆλΆ)main-start(mainμ΄μ μμ λΆλΆ,sidebar-endμ λμΌ)main-end(mainμ΄μ λ λΆλΆ)
κ·Έλ° λ€μ μ΄λ¬ν μμμ λͺ
λͺ
λ λΌμΈμ μ¬μ©νμ¬ .sidebar λ° .main-content μμμ μμΉλ₯Ό μ§μ ν μ μμ΅λλ€. μ΄ μ체μ μ΄λ¦(μ: `grid-column: sidebar;`)μ `grid-column: sidebar-start / sidebar-end;`μ μ½μΉμΌλ‘ μ¬μ©ν μ μμ΅λλ€. μ΄κ²μ κ°λ ₯ν λ¨μνμ
λλ€.
μ 2: ν€λ, μ½ν μΈ λ° λ°λ₯κΈ λ μ΄μμ
ν€λ, μ½ν μΈ μμ λ° λ°λ₯κΈμ΄ μλ λ³΄λ€ λ³΅μ‘ν λ μ΄μμμ λ§λ€μ΄ λ³΄κ² μ΅λλ€.
.container {
display: grid;
grid-template-rows: [header] auto [content] 1fr [footer] auto;
grid-template-columns: [full-width] 1fr;
}
.header {
grid-row: header;
grid-column: full-width;
}
.content {
grid-row: content;
grid-column: full-width;
}
.footer {
grid-row: footer;
grid-column: full-width;
}
μ¬κΈ°μλ ν νΈλ μ΄λ¦μ header, content λ° footerλ‘ μ§μ νκ³ μ΄ νΈλ μ΄λ¦μ full-widthλ‘ μ§μ νμ΅λλ€. μ΄λ κ² νλ©΄ λ€μ μμμ λͺ
λͺ
λ λΌμΈμ΄ μμ±λ©λλ€.
header-startheader-endcontent-startcontent-endfooter-startfooter-endfull-width-startfull-width-end
λ€μ λ§νμ§λ§, μ΄λ¬ν μμμ λͺ λͺ λ λΌμΈμ μ¬μ©νμ¬ κ·Έλ¦¬λ λ΄μμ ν€λ, μ½ν μΈ λ° λ°λ₯κΈ μμμ μμΉλ₯Ό μ½κ² μ§μ ν μ μμ΅λλ€.
μ 3: λ°λ³΅ νΈλμ΄ μλ 볡μ‘ν λ€μ€ μ΄ λ μ΄μμ
λ 볡μ‘ν λ μ΄μμ, νΉν λ°λ³΅ ν¨ν΄κ³Ό κ΄λ ¨λ λ μ΄μμμ κ²½μ° μμμ λͺ λͺ λ λΌμΈμ΄ μ§μ μΌλ‘ λΉμ λ°ν©λλ€. μ¬μ΄λλ°, μ£Ό μ½ν μΈ μμ λ° μΌλ ¨μ κΈ°μ¬ μΉμ μ΄ μλ λ μ΄μμμ κ³ λ €ν΄ λ³΄μΈμ.
.container {
display: grid;
grid-template-columns: [sidebar] 200px [content] 1fr;
grid-template-rows: [header] auto [article] auto [footer] auto;
}
.sidebar {
grid-column: sidebar;
grid-row: header / footer;
}
.content {
grid-column: content;
grid-row: header / footer;
}
.header {
grid-column: sidebar / content;
grid-row: header;
}
.article {
grid-column: sidebar / content;
grid-row: article;
}
.footer {
grid-column: sidebar / content;
grid-row: footer;
}
μ΄ μμμλ νΉν νΈλ μ΄λ¦μ μ¬μ©νλ μ½μΉκ³Ό κ²°ν©ν λ μμμ λͺ λͺ λ λΌμΈμ΄ μ¬λ¬ νκ³Ό μ΄μ κ±Έμ³ μμμ μμΉλ₯Ό μΌλ§λ λ¨μνν μ μλμ§ λ³΄μ¬μ€λλ€. λ²νΈκ° λ§€κ²¨μ§ λΌμΈλ§μΌλ‘ μ΄ λ μ΄μμμ κ΄λ¦¬νλ κ²μ μμν΄ λ³΄μΈμ!
λͺ μμ λΌμΈ μ΄λ¦κ³Ό μμμ λͺ λͺ λ λΌμΈ κ²°ν©
μμμ λͺ λͺ λ λΌμΈμ λ ν° μ μ°μ±μ μν΄ λͺ μμ μΌλ‘ μ μλ λΌμΈ μ΄λ¦κ³Ό ν¨κ» μ¬μ©ν μ μμ΅λλ€. νΈλ μ΄λ¦ μΈμ μ¬μ©μ μ μ λΌμΈ μ΄λ¦μ μ μνμ¬ κ·Έλ¦¬λ λ μ΄μμ λ΄μ νΉμ λΌμΈμ λμμΌλ‘ μ§μ ν μ μμ΅λλ€.
.container {
display: grid;
grid-template-columns: [sidebar-start] 200px [sidebar-end main-start] 1fr [main-end];
}
.sidebar {
grid-column: sidebar;
}
.main-content {
grid-column: main;
}
μ΄ μμμλ sidebar μ΄μ μμ λΌμΈ μ΄λ¦μ λͺ
μμ μΌλ‘ sidebar-startλ‘, λ λΌμΈ μ΄λ¦μ sidebar-endλ‘ μ§μ νμ΅λλ€. λν main μ΄μ μμ λΌμΈ μ΄λ¦μ main-startλ‘, λ λΌμΈ μ΄λ¦μ `main-end`λ‘ μ§μ νμ΅λλ€. `sidebar-end`μ `main-start`λ₯Ό λμΌν 그리λ λΌμΈμ ν λΉνμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μμμ λͺ
λͺ
λ λΌμΈμ μ΄μ μ νμ©νλ©΄μ 그리λ λ μ΄μμμ μΈλ°νκ² μ μ΄ν μ μμ΅λλ€.
μμμ λͺ λͺ λ λΌμΈ μ¬μ©μ μν λͺ¨λ² μ¬λ‘
μμμ λͺ λͺ λ λΌμΈμ μ΄μ μ κ·Ήλννλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό κ³ λ €νμΈμ.
- μ€λͺ μ μΈ νΈλ μ΄λ¦ μ¬μ©: κ° κ·Έλ¦¬λ μμμ μ½ν μΈ λλ κΈ°λ₯μ μ ννκ² λ°μνλ νΈλ μ΄λ¦μ μ νν©λλ€. μ΄λ κ² νλ©΄ CSSλ₯Ό λ μ½κΈ° μ½κ³ μ΄ν΄νκΈ° μ½κ² λ§λ€ μ μμ΅λλ€. κΈλ‘λ² μ²μ€μ κ²½μ° μ½κ² λ²μλκ±°λ μ¬λ¬ μΈμ΄μμ μ΄ν΄λλ μ΄λ¦μ μ°μ μ μΌλ‘ μ§μ ν©λλ€.
- μΌκ΄μ± μ μ§: 그리λ νΈλ λ° μμμ λΌμΈμ λν΄ μΌκ΄λ λͺ λͺ κ·μΉμ μ¬μ©ν©λλ€. μ΄λ κ² νλ©΄ νΌλμ λ°©μ§νκ³ κ·Έλ¦¬λ λ μ΄μμμ μμΈ‘ κ°λ₯νκ² λ§λ€ μ μμ΅λλ€.
- μ§λμΉκ² 볡μ‘ν λ μ΄μμ λ°©μ§: μμμ λͺ λͺ λ λΌμΈμ΄ 볡μ‘ν λ μ΄μμμ λ¨μνν μ μμ§λ§ 그리λ ꡬ쑰λ₯Ό μ΅λν λ¨μνκ² μ μ§νλ κ²μ΄ μ¬μ ν μ€μν©λλ€. μ§λμΉκ² 볡μ‘ν λ μ΄μμμ μ μ§ κ΄λ¦¬ λ° λλ²κ·Έκ° μ΄λ €μΈ μ μμ΅λλ€. ν° λ μ΄μμμ λ μκ³ κ΄λ¦¬νκΈ° μ¬μ΄ κ΅¬μ± μμλ‘ λΆν΄νλ κ²μ κ³ λ €ν΄ λ³΄μΈμ.
- μ² μ ν ν μ€νΈ: λ€λ₯Έ CSS κΈ°μ κ³Ό λ§μ°¬κ°μ§λ‘ λ€μν λΈλΌμ°μ μ μ₯μΉμμ 그리λ λ μ΄μμμ μ² μ ν ν μ€νΈνλ κ²μ΄ μ€μν©λλ€. λ μ΄μμμ΄ μ¬λ°λ₯΄κ² λ λλ§λκ³ λ€μν νλ©΄ ν¬κΈ°μ λ°μνλμ§ νμΈνμΈμ.
μ κ·Όμ± κ³ λ € μ¬ν
CSS Gridλ₯Ό μ¬μ©ν λλ μ κ·Όμ±μ κ³ λ €νλ κ²μ΄ μ€μν©λλ€. λ€μ μ§μΉ¨μ λ°λΌ μ₯μ κ° μλ μ¬μ©μκ° κ·Έλ¦¬λ λ μ΄μμμ μ κ·Όν μ μλλ‘ νμΈμ.
- μλ―Έλ‘ μ HTML μ 곡: μλ―Έλ‘ μ HTML μμλ₯Ό μ¬μ©νμ¬ μ½ν μΈ λ₯Ό λ Όλ¦¬μ μΌλ‘ ꡬ쑰νν©λλ€. μ΄λ κ² νλ©΄ 보쑰 κΈ°μ μ΄ νμ΄μ§ ꡬ쑰λ₯Ό μ΄ν΄νλ λ° λμμ΄ λ©λλ€.
- μ μ ν ν€λ³΄λ νμ 보μ₯: μ¬μ©μκ° ν€λ³΄λλ₯Ό μ¬μ©νμ¬ κ·Έλ¦¬λ λ μ΄μμμ νμν μ μλμ§ νμΈν©λλ€.
tabindexμμ±μ μ¬μ©νμ¬ μμμ ν¬μ»€μ€ μμλ₯Ό μ μ΄ν©λλ€. - μ΄λ―Έμ§μ λν λ체 ν μ€νΈ μ 곡: 그리λ λ μ΄μμμ λͺ¨λ μ΄λ―Έμ§μ λν΄ μ€λͺ μ μΈ λ체 ν μ€νΈλ₯Ό ν¬ν¨ν©λλ€. μ΄λ κ² νλ©΄ μκ° μ₯μ κ° μλ μ¬μ©μκ° μ΄λ―Έμ§μ λ΄μ©μ μ΄ν΄νλ λ° λμμ΄ λ©λλ€.
- ARIA μμ± μ¬μ©: ARIA μμ±μ μ¬μ©νμ¬ κ·Έλ¦¬λ λ μ΄μμμ ꡬ쑰 λ° λμμ λν μΆκ° μ 보λ₯Ό 보쑰 κΈ°μ μ μ 곡ν©λλ€.
μΌλ°μ μΈ ν¨μ λ° λ°©μ§ λ°©λ²
μμμ λͺ λͺ λ λΌμΈμ λ§μ μ΄μ μ μ 곡νμ§λ§ μ£Όμν΄μΌ ν λͺ κ°μ§ μ μ¬μ μΈ ν¨μ λ μμ΅λλ€.
- νΈλ μ΄λ¦μ μ€ν: νΈλ μ΄λ¦μ κ°λ¨ν μ€νλ μ 체 그리λ λ μ΄μμμ μμμν¬ μ μμ΅λλ€. μ€λ₯λ₯Ό λ°©μ§νλ €λ©΄ νΈλ μ΄λ¦μ μ£Όμ κΉκ² λ€μ νμΈνμΈμ.
- λΌμΈ μ΄λ¦ μΆ©λ: μ€μλ‘ λ κ°μ λ€λ₯Έ νΈλμ λν΄ λμΌν μ΄λ¦μ μ¬μ©νλ©΄ CSS Gridλ 첫 λ²μ§Έ νΈλλ§ μΈμν©λλ€. λͺ¨λ νΈλ μ΄λ¦μ΄ κ³ μ νμ§ νμΈνμΈμ.
- μμμ λͺ λͺ λ λΌμΈμ κ³Όλν μ¬μ©: μμμ λͺ λͺ λ λΌμΈμ΄ CSSλ₯Ό λ¨μνν μ μμ§λ§ μ μ€νκ² μ¬μ©νλ κ²μ΄ μ€μν©λλ€. λ§€μ° λ³΅μ‘ν λ μ΄μμμ κ²½μ° λͺ μμ λΌμΈ μ΄λ¦ λλ 그리λ μμμ μ¬μ©νλ κ²μ΄ λ μ μ ν μ μμ΅λλ€.
λ€μν μ°μ λΆμΌμ μ€μ μ
μμμ λͺ λͺ λ λΌμΈμ λ€μν μ°μ λ° μΉμ¬μ΄νΈ μ νμ μ μ©ν μ μμ΅λλ€. λͺ κ°μ§ μλ λ€μκ³Ό κ°μ΅λλ€.
- μ μ μκ±°λ (κΈλ‘λ² μλ§€): λ€μν νλ©΄ ν¬κΈ°μ μ μνκ³ μ ν μ΄λ―Έμ§, μ€λͺ λ° κ°κ²©μ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ λ°©μμΌλ‘ νμνλ μ μ°ν μ ν 그리λλ₯Ό λ§λλλ€. μμμ λͺ λͺ λ λΌμΈμ λ€μν λ‘μΌμΌ λ° μΈμ΄μμ λ€μν μ ν μ 보 κΈΈμ΄μ λν λ μ΄μμμ κ΄λ¦¬νλ λ° λμμ΄ λ©λλ€.
- λ΄μ€ μΉμ¬μ΄νΈ (κ΅μ λ―Έλμ΄): ν€λλΌμΈ, κΈ°μ¬, μ΄λ―Έμ§ λ° μ¬μ΄λλ°κ° μλ 볡μ‘ν λ΄μ€ λ μ΄μμμ ꡬμ±ν©λλ€. μμμ λͺ λͺ λ λΌμΈμ μ¬μ©νμ¬ νμ΄μ§μ λ€μν μΉμ μ μ μνκ³ κ·Έμ λ°λΌ μ½ν μΈ μ μμΉλ₯Ό μ§μ νμ¬ λ€μν μ₯μΉ μ ν λ° μ§μμμ μΌκ΄μ±μ 보μ₯ν μ μμ΅λλ€.
- λΈλ‘κ·Έ (λ€κ΅μ΄ μ½ν μΈ ): μ λͺ©, μ½ν μΈ , μ΄λ―Έμ§ λ° μμ±μ μ λ³΄κ° μλ λΈλ‘κ·Έ κ²μλ¬Όμ ꡬμ±ν©λλ€. λ μ΄μμμ λ€μν μ½ν μΈ κΈΈμ΄μ μ΄λ―Έμ§ ν¬κΈ°μ λ§κ² μ½κ² μ‘°μ ν μ μμΌλ©° μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ μ°λ μΈμ΄λ μ§μν μ μμ΅λλ€.
- λμ보λ (κΈλ‘λ² λΆμ): μ°¨νΈ, κ·Έλν λ° λ°μ΄ν° ν μ΄λΈμ΄ μλ λ°μν λμ보λλ₯Ό λ§λλλ€. μμμ λͺ λͺ λ λΌμΈμ λ€μν λμ보λ μμλ₯Ό λ Όλ¦¬μ μ΄κ³ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ λ°©μμΌλ‘ λ°°μ΄νμ¬ λ³΅μ‘ν λ°μ΄ν°λ₯Ό μ¬μ©νλ κ΅μ νμ μ¬μ©μ κ²½νμ ν₯μμν€λ λ° λμμ΄ λ©λλ€.
κ²°λ‘ : ν¨μ¨μ μΈ κ·Έλ¦¬λ λ μ΄μμμ μν μμμ λͺ λͺ λ λΌμΈ μμ©
CSS Grid μμμ λͺ λͺ λ λΌμΈμ 볡μ‘ν μΉ λ μ΄μμμ λ§λ€κ³ μ μ§ κ΄λ¦¬νλ κ°λ ₯νκ³ ν¨μ¨μ μΈ λ°©λ²μ μ 곡ν©λλ€. νΈλ μ΄λ¦μ κΈ°λ°μΌλ‘ λΌμΈ μ΄λ¦μ μλμΌλ‘ μμ±νλ©΄ CSSλ₯Ό λ¨μννκ³ κ°λ μ±μ ν₯μμν€λ©° μ€λ₯ μνμ μ€μΌ μ μμ΅λλ€. μ΄λ¬ν κΈ°μ μ μ±ννκ³ μ²μ€μ κΈλ‘λ² κ΄μ μ κ³ λ €ν¨μΌλ‘μ¨ μ μΈκ³ μ¬μ©μλ₯Ό μν΄ λμ± μ κ·ΌνκΈ° μ½κ³ μ μ§ κ΄λ¦¬ κ°λ₯νλ©° λ§€λ ₯μ μΈ μΉ κ²½νμ λ§λ€ μ μμ΅λλ€. μμ°μ±μ ν₯μμν€κ³ λ³΄λ€ κ°λ ₯νκ³ μ μ§ κ΄λ¦¬ κ°λ₯ν μΉ μ ν리μΌμ΄μ μ λ§λ€κΈ° μν΄ μ΄ κΈ°λ₯μ μν¬νλ‘μ ν΅ν©νλ κ²μ κ³ λ €ν΄ λ³΄μΈμ. λ€μν κΈλ‘λ² μ²μ€μκ² λ μ΄μμμ΄ κΈ°λ₯μ μ΄κ³ μ κ·Ό κ°λ₯νλλ‘ λͺ νν λͺ λͺ κ·μΉκ³Ό μ² μ ν ν μ€νΈλ₯Ό μ°μ μνλ κ²μ μμ§ λ§μΈμ.