CSS 그리λμ μμμ μ΄λ¦ μ§μ λΌμΈμ κ°λ ₯ν κΈ°λ₯μ νμνμ¬ μ μ°νκ³ μ μ§ κ΄λ¦¬νκΈ° μ¬μ΄ λ μ΄μμμ λ§λ€μ΄ 보μΈμ. μ΄ κ°μ΄λλ μ μΈκ³ κ°λ°μλ₯Ό μν ꡬ문, μ¬μ© μ¬λ‘ λ° λͺ¨λ² μ¬λ‘λ₯Ό λ€λ£Ήλλ€.
CSS 그리λ μλ²½ νμ©: λμ λ μ΄μμμ μν μμμ μ΄λ¦ μ§μ λΌμΈ λ§μ€ν°νκΈ°
CSS 그리λλ μΉ λ μ΄μμμ νλͺ μ μΌμΌμΌ λΉκ΅ν μ μλ μ μ΄λ ₯κ³Ό μ μ°μ±μ μ 곡ν©λλ€. 그리λ λΌμΈμ λͺ μμ μΌλ‘ μ μνλ©΄ μ λ°ν μ μ΄κ° κ°λ₯νμ§λ§, μμμ μ΄λ¦ μ§μ λΌμΈμ 그리λ λ μ΄μμμ λ¨μννκ³ ν₯μμν€λ κ°λ ₯νκ³ μ’ μ’ κ°κ³Όλλ λ©μ»€λμ¦μ μ 곡ν©λλ€. μ΄ κ°μ΄λμμλ μμμ μ΄λ¦ μ§μ λΌμΈμ κ°λ μ νμνκ³ , 그리λ νΈλμμ λΌμΈ μ΄λ¦μ μλμΌλ‘ μμ±νλ λ°©λ²μ 보μ¬μ£Όλ©°, μ μΈκ³ μ¬μ©μλ₯Ό λμμΌλ‘ μ μ© κ°λ₯ν μ€μ©μ μΈ μμ λ₯Ό μ 곡ν©λλ€.
μμμ μ΄λ¦ μ§μ λΌμΈμ΄λ 무μμΈκ°μ?
CSS 그리λμμ 그리λ λΌμΈμ 그리λμ ꡬ쑰λ₯Ό νμ±νλ λ²νΈκ° λ§€κ²¨μ§ μν λ° μμ§μ μ
λλ€. grid-template-columns λ° grid-template-rows μμ±μ μ¬μ©νμ¬ μ΄λ¬ν λΌμΈμ λͺ
μμ μΌλ‘ λͺ
λͺ
ν μ μμ΅λλ€. κ·Έλ¬λ μ΄λ¦μΌλ‘ 그리λ νΈλ(μ΄ λ° ν)μ μ μνλ©΄ CSS 그리λλ μλμΌλ‘ μμμ μ΄λ¦ μ§μ λΌμΈμ μμ±ν©λλ€. μ¦, 그리λ νΈλμ μ΄λ¦μ μ§μ νλ©΄ ν΄λΉ νΈλκ³Ό μ νλ λΌμΈμ΄ ν΄λΉ μ΄λ¦μ μμλ°μ κ°κ° -startμ -endκ° μ λμ¬ λ° μ λ―Έμ¬λ‘ λΆκ² λ©λλ€.
μλ₯Ό λ€μ΄ 'sidebar'λΌλ μ΄λ¦μ μ΄ νΈλμ μ μνλ©΄ CSS 그리λλ μλμΌλ‘ 'sidebar-start'μ 'sidebar-end'λΌλ λ κ°μ μ΄λ¦ μ§μ λΌμΈμ μμ±ν©λλ€. μ΄λ¬ν μμμ λͺ λͺ κ·μΉμ μ¬μ©νλ©΄ 그리λ νλͺ©μ λ°°μΉν λ μ΄λ¬ν λΌμΈμ μ°Έμ‘°ν μ μμ΄ μ½λμ κ°λ μ±κ³Ό μ μ§ κ΄λ¦¬μ±μ λμΌ μ μμ΅λλ€.
ꡬ문 λ° μ¬μ©λ²
μ΄λ¦μΌλ‘ 그리λ νΈλμ μ μνλ ꡬ문μ κ°λ¨ν©λλ€. grid-template-columns λ° grid-template-rows μμ± λ΄μμ νΈλ ν¬κΈ°λ₯Ό μ§μ ν λ€μ μ΄λ¦μ λκ΄νΈλ‘ λ¬Άμ μ μμ΅λλ€. λ€μμ κΈ°λ³Έ μμ μ
λλ€.
.grid-container {
display: grid;
grid-template-columns: [col-start] 1fr [col-end];
grid-template-rows: [row-start] auto [row-end];
}
μ΄ μμ μμλ λ¨μΌ μ΄κ³Ό νμ μ μνκ³ μμ λ° λ λΌμΈμ λͺ μμ μΌλ‘ λͺ λͺ νμ΅λλ€. κ·Έλ¬λ μ§μ ν νμ *νΈλ* μ체μ μ΄λ¦μ μ§μ ν λ λνλ©λλ€. λ€μκ³Ό κ°μ΄ μμ ν΄ λ³΄κ² μ΅λλ€.
.grid-container {
display: grid;
grid-template-columns: [sidebar] 200px [main] 1fr;
grid-template-rows: [header] auto [content] 1fr [footer] auto;
}
μ΄μ μμμ μΌλ‘ λͺ λͺ λ λΌμΈμ΄ μκ²Όμ΅λλ€. μ΄μ μ΄ν΄λ³΄κ² μ΅λλ€. λΌμΈμ μ΄μ λ€μκ³Ό κ°μ΅λλ€.
sidebar-start: 'sidebar' μ΄ μμ λΌμΈ.sidebar-end: 'sidebar' μ΄ λ€μ λΌμΈμΌλ‘,main-startμ΄κΈ°λ ν©λλ€.main-end: 'main' μ΄ λ€μ λΌμΈ.
κ·Έλ¦¬κ³ νμ λ€μκ³Ό κ°μ΅λλ€.
header-start: 'header' ν μμ λΌμΈ.header-end: 'header' ν λ€μ λΌμΈμΌλ‘,content-startμ΄κΈ°λ ν©λλ€.content-end: 'content' ν λ€μ λΌμΈμΌλ‘,footer-startμ΄κΈ°λ ν©λλ€.footer-end: 'footer' ν λ€μ λΌμΈ.
μ΄λ¬ν μμμ μ΄λ¦ μ§μ λΌμΈμ μ¬μ©νμ¬ νλͺ©μ λ°°μΉνλ €λ©΄ grid-column-start, grid-column-end, grid-row-start λ° grid-row-end μμ±μ μ¬μ©ν©λλ€.
.sidebar {
grid-column-start: sidebar-start;
grid-column-end: sidebar-end;
grid-row-start: header-start;
grid-row-end: footer-end;
}
.main-content {
grid-column-start: main-start;
grid-column-end: main-end;
grid-row-start: content-start;
grid-row-end: footer-end;
}
μ€μ©μ μΈ μμ λ° μ¬μ© μ¬λ‘
μμμ μ΄λ¦ μ§μ λΌμΈμ μ΄μ μ μ€λͺ νκΈ° μν΄ λͺ κ°μ§ μ€μ©μ μΈ μμ λ₯Ό μ΄ν΄λ³΄κ² μ΅λλ€.
1. κΈ°λ³Έ μΉμ¬μ΄νΈ λ μ΄μμ
μΌλ°μ μΈ μΉμ¬μ΄νΈ λ μ΄μμμ ν€λ, λ΄λΉκ²μ΄μ , λ©μΈ μ½ν μΈ μμ, μ¬μ΄λλ°, νΈν°λ‘ ꡬμ±λ©λλ€. μμμ μ΄λ¦ μ§μ λΌμΈμ μ¬μ©νμ¬ μ΄ κ΅¬μ‘°λ₯Ό μ½κ² μ μν μ μμ΅λλ€.
.grid-container {
display: grid;
grid-template-columns: [sidebar] 250px [content] 1fr;
grid-template-rows: [header] auto [nav] auto [main] 1fr [footer] auto;
grid-gap: 10px;
}
.header {
grid-column: sidebar-start / content-end;
grid-row: header-start / header-end;
}
.nav {
grid-column: sidebar-start / content-end;
grid-row: nav-start / nav-end;
}
.sidebar {
grid-column: sidebar-start / sidebar-end;
grid-row: main-start / footer-end;
}
.main-content {
grid-column: content-start / content-end;
grid-row: main-start / footer-end;
}
.footer {
grid-column: sidebar-start / content-end;
grid-row: footer-start / footer-end;
}
μ΄ μμ λ μμμ μ΄λ¦ μ§μ λΌμΈμ΄ μ΄λ»κ² 그리λ μ μ λ° λ°°μΉλ₯Ό λ¨μννμ¬ μ½λλ₯Ό λ μ½κΈ° μ½κ³ μ΄ν΄νκΈ° μ½κ² λ§λλμ§ λ³΄μ¬μ€λλ€.
2. λμ μ½ν μΈ λ₯Ό μ¬μ©ν μΉ΄λ λ μ΄μμ
μμμ μ΄λ¦ μ§μ λΌμΈμ μΉ΄λ λ μ΄μμμ λ§λλ λ°μλ μ μ©νλ©°, νΉν κ° μΉ΄λ λ΄μ μ½ν μΈ κ° λ€μν λ μ μ©ν©λλ€. μΉ΄λμ 그리λκ° μκ³ κ° μΉ΄λμ λ€λ₯Έ μμ μμκ° μμ μ μλ μλ리μ€λ₯Ό μκ°ν΄ 보μΈμ. μμμ μ΄λ¦ μ§μ λΌμΈμ μ¬μ©νμ¬ μ½ν μΈ μ κ΄κ³μμ΄ μΉ΄λμ κ΅¬μ‘°κ° μΌκ΄λκ² μ μ§λλλ‘ ν μ μμ΅λλ€.
.card-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
}
.card {
display: grid;
grid-template-rows: [title] auto [content] 1fr [actions] auto;
border: 1px solid #ccc;
padding: 10px;
}
.card-title {
grid-row: title-start / title-end;
}
.card-content {
grid-row: content-start / content-end;
}
.card-actions {
grid-row: actions-start / actions-end;
}
μ΄ μμ μμ κ° μΉ΄λλ μ λͺ©, μ½ν μΈ , μ‘μ μ μΈ νμΌλ‘ ꡬμ±λ 그리λ 컨ν μ΄λμ λλ€. μμμ μ΄λ¦ μ§μ λΌμΈμ μΉμ μ€ νλκ° λΉμ΄ μκ±°λ λ€μν μμ μ½ν μΈ λ₯Ό ν¬ν¨νλλΌλ μ΄λ¬ν νμ΄ νμ μ¬λ°λ₯΄κ² λ°°μΉλλλ‘ λ³΄μ₯ν©λλ€.
3. μ‘μ§ λ μ΄μμ
μ‘μ§ λ μ΄μμμ μ’ μ’ ν μ€νΈμ μ΄λ―Έμ§μ 볡μ‘ν λ°°μ΄μ νΉμ§μΌλ‘ ν©λλ€. μμμ μ΄λ¦ μ§μ λΌμΈμ μ¬μ©νλ©΄ μ΄λ¬ν λ μ΄μμ μμ±μ λ¨μνν μ μμ΅λλ€. λμ λλ νΉμ§ κΈ°μ¬μ κ·Έ μ£Όμμ μ¬λ¬ κ°μ μμ κΈ°μ¬κ° μλ λ μ΄μμμ μμν΄ λ³΄μΈμ.
.magazine-grid {
display: grid;
grid-template-columns: [main-start] 2fr [sidebar-start] 1fr [sidebar-end main-end];
grid-template-rows: [header-start] auto [feature-start] 2fr [feature-end] auto [other-articles-start] 1fr [other-articles-end footer-start] auto [footer-end];
grid-gap: 10px;
}
.header {
grid-column: main-start / main-end;
grid-row: header-start / header-end;
}
.featured-article {
grid-column: main-start / sidebar-start;
grid-row: feature-start / other-articles-start;
}
.sidebar {
grid-column: sidebar-start / sidebar-end;
grid-row: feature-start / footer-end;
}
.other-articles {
grid-column: main-start / sidebar-start;
grid-row: other-articles-start / footer-start;
}
.footer {
grid-column: main-start / main-end;
grid-row: footer-start / footer-end;
}
sidebar-endμ main-end, κ·Έλ¦¬κ³ other-articles-endμ footer-startλ₯Ό λ¨μΌ μ΄λ¦ μ§μ λΌμΈμΌλ‘ κ²°ν©ν λ°©λ²μ μ£Όλͺ©νμΈμ. μ΄λ 그리λ μ μλ₯Ό λ¨μννλ©΄μλ λͺ
ννκ³ μλ―Έ μλ μ΄λ¦μ μ 곡ν©λλ€.
μμμ μ΄λ¦ μ§μ λΌμΈ μ¬μ©μ μ΄μ
μμμ μ΄λ¦ μ§μ λΌμΈμ λͺ μμ μΌλ‘ λ²νΈκ° 맀겨μ§κ±°λ λͺ λͺ λ λΌμΈμ λΉν΄ λͺ κ°μ§ μ΄μ μ μ 곡ν©λλ€.
- κ°λ μ±: 그리λ νΈλκ³Ό λΌμΈμ μλ―Έ μλ μ΄λ¦μ μ¬μ©νλ©΄ μ½λκ° μ체μ μΌλ‘ λ¬Έμνλκ³ μ΄ν΄νκΈ° μ¬μμ§λλ€.
- μ μ§ κ΄λ¦¬μ±: 그리λ ꡬ쑰λ₯Ό μμ ν΄μΌ ν λ νΈλ μ μλ§ λ³κ²½νλ©΄ μμμ μ΄λ¦ μ§μ λΌμΈμ΄ μλμΌλ‘ μ λ°μ΄νΈλ©λλ€. μ΄λ 그리λ λΌμΈ λ²νΈλ₯Ό μλμΌλ‘ μ λ°μ΄νΈν λ μ€λ₯κ° λ°μν μνμ μ€μ¬μ€λλ€.
- μ μ°μ±: μμμ μ΄λ¦ μ§μ λΌμΈμ μ¬μ©νλ©΄ νΉν λμ μ½ν μΈ λ λ°μν λμμΈμ λ€λ£° λ λ μ μ°νκ³ μ μλ ₯ μλ λ μ΄μμμ λ§λ€ μ μμ΅λλ€.
- 보μΌλ¬νλ μ΄νΈ κ°μ: λͺ¨λ λ¨μΌ λΌμΈ μ΄λ¦μ λͺ μμ μΌλ‘ μ μν νμκ° μμΌλ―λ‘ μμ±ν΄μΌ νλ μ½λμ μμ΄ μ€μ΄λλλ€.
λͺ¨λ² μ¬λ‘
μμμ μ΄λ¦ μ§μ λΌμΈμ μ΄μ μ κ·Ήλννλ €λ©΄ λ€μ λͺ¨λ² μ¬λ‘λ₯Ό κ³ λ €νμΈμ.
- μ€λͺ μ μΈ μ΄λ¦ μ¬μ©: 그리λ νΈλκ³Ό λΌμΈμ λͺ©μ μ λͺ ννκ² λνλ΄λ μ΄λ¦μ μ ννμΈμ. "col1" λλ "row2"μ κ°μ μΌλ°μ μΈ μ΄λ¦μ νΌνμΈμ. 곡κ°μ μ°¨μ§ν μ½ν μΈ μ λν΄ μκ°ν΄ 보μΈμ.
- μΌκ΄λ λͺ λͺ κ·μΉ μ μ§: 그리λ νΈλκ³Ό λΌμΈμ λν μΌκ΄λ λͺ λͺ ν¨ν΄μ μ€μ νμ¬ μ½λλ₯Ό μ΄ν΄νκ³ μ μ§ κ΄λ¦¬νκΈ° μ½κ² λ§λμΈμ.
- μ§λμΉκ² 볡μ‘ν 그리λ νΌνκΈ°: μμμ μ΄λ¦ μ§μ λΌμΈμ 볡μ‘ν λ μ΄μμμ λ¨μνν μ μμ§λ§, 그리λ ꡬ쑰λ₯Ό κ°λ₯ν ν λ¨μνκ² μ μ§νλ κ²μ΄ μ¬μ ν μ€μν©λλ€. μ§λμΉκ² 볡μ‘ν 그리λλ κ΄λ¦¬νκ³ λλ²κΉ νκΈ° μ΄λ €μΈ μ μμ΅λλ€.
- λ μ΄μμ μ² μ ν ν μ€νΈ: νμ λ€λ₯Έ μ₯μΉμ νλ©΄ ν¬κΈ°μμ 그리λ λ μ΄μμμ ν μ€νΈνμ¬ λ°μνμ΄κ³ μμλλ‘ μλνλμ§ νμΈνμΈμ. λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ κ·Έλ¦¬λμ μ΄λ¦ μ§μ λΌμΈμ μκ°μ μΌλ‘ κ²μ¬νλ κ²μ κ³ λ €νμΈμ.
- μ£Όμ μ¬μ©: CSS μ½λμ μ£Όμμ μΆκ°νμ¬ κ·Έλ¦¬λ ꡬ쑰μ λͺ©μ κ³Ό μ΄λ¦ μ§μ λΌμΈμ μλ―Έλ₯Ό μ€λͺ νμΈμ. μ΄λ κ² νλ©΄ λ€λ₯Έ κ°λ°μ(κ·Έλ¦¬κ³ λ―Έλμ μμ )κ° μ½λλ₯Ό λ μ½κ² μ΄ν΄ν μ μμ΅λλ€.
μ μΈκ³ μ¬μ©μλ₯Ό μν κ³ λ € μ¬ν
μ μΈκ³ μ¬μ©μλ₯Ό λμμΌλ‘ μΉμ¬μ΄νΈμ μΉ μ ν리μΌμ΄μ μ κ°λ°ν λ CSS 그리λμ μμμ μ΄λ¦ μ§μ λΌμΈμ μ¬μ©ν λ λ€μ μμλ₯Ό κ³ λ €νλ κ²μ΄ μ€μν©λλ€.
- μΈμ΄: λ€λ₯Έ μΈμ΄κ° 그리λ λ μ΄μμμ μ΄λ€ μν₯μ λ―ΈμΉ μ μλμ§ κ³ λ €νμΈμ. μλ₯Ό λ€μ΄, μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ μ½λ(RTL) μΈμ΄λ μΌμͺ½μμ μ€λ₯Έμͺ½μΌλ‘ μ½λ(LTR) μΈμ΄μ λ€λ₯Έ 그리λ κ΅¬μ‘°κ° νμν μ μμ΅λλ€. λ λμ κ΅μ ν μ§μμ μν΄ λ¬Όλ¦¬μ μμ±(μ:
grid-column-start: left) λμ λ Όλ¦¬μ μμ±(μ:grid-column-start: start)μ μ¬μ©νμΈμ. - μ½ν μΈ : λ€λ₯Έ μΈμ΄μ ν μ€νΈ κΈΈμ΄μ μ μνμΈμ. μΌλΆ μΈμ΄λ λ€λ₯Έ μΈμ΄λ³΄λ€ λ λ§μ 곡κ°μ΄ νμν μ μμΌλ©°, μ΄λ 그리λ λ μ΄μμμ μν₯μ λ―ΈμΉ μ μμ΅λλ€. 그리λκ° λ€λ₯Έ μ½ν μΈ κΈΈμ΄λ₯Ό μμ©ν μ μμ λ§νΌ μ μ°νμ§ νμΈνμΈμ.
- λ¬Έν: 그리λ λ μ΄μμμ λμμΈν λ λ¬Ένμ μ°¨μ΄λ₯Ό κ³ λ €νμΈμ. μλ₯Ό λ€μ΄, νΉμ μμμ λ°°μΉλ μΌλΆ λ¬ΈνκΆμμ λ€λ₯Έ λ¬ΈνκΆλ³΄λ€ λ μ μ ν μ μμ΅λλ€. λ¬Έν μ λ¬Έκ°μ μλ΄νκ±°λ μ¬μ©μ μ‘°μ¬λ₯Ό μννμ¬ λ μ΄μμμ΄ λ¬Ένμ μΌλ‘ λ―Όκ°νμ§ νμΈνμΈμ.
- μ κ·Όμ±: 그리λ λ μ΄μμμ΄ μ₯μ κ° μλ μ¬μ©μμκ² μ κ·Ό κ°λ₯νμ§ νμΈνμΈμ. μλ§¨ν± HTMLκ³Ό ARIA μμ±μ μ¬μ©νμ¬ λ³΄μ‘° κΈ°μ μ 그리λμ ꡬ쑰μ μ½ν μΈ μ λν μ 보λ₯Ό μ 곡νμΈμ.
μλ₯Ό λ€μ΄, μμ΄μ μλμ΄ μ¬μ©μλ₯Ό λͺ¨λ λμμΌλ‘ νλ μΉμ¬μ΄νΈλ κ°κ° LTR λ° RTL λ μ΄μμμ λν΄ λ€λ₯Έ 그리λ ꡬ쑰λ₯Ό μ¬μ©ν μ μμ΅λλ€. μ΄λ :dir(rtl) μ νμλ₯Ό μ¬μ©νμ¬ CSSλ‘ κ΅¬νν μ μμ΅λλ€.
/* Default LTR layout */
.grid-container {
display: grid;
grid-template-columns: [content-start] 2fr [sidebar-start] 1fr [sidebar-end content-end];
}
.sidebar {
grid-column: sidebar-start / sidebar-end;
}
.content {
grid-column: content-start / sidebar-start;
}
/* RTL layout */
:dir(rtl) .grid-container {
grid-template-columns: [sidebar-start] 1fr [content-start] 2fr [content-end sidebar-end];
}
:dir(rtl) .sidebar {
grid-column: sidebar-start / content-start;
}
:dir(rtl) .content {
grid-column: content-start / content-end;
}
κ³ κΈ κΈ°μ
1. λͺ μμ λ° μμμ μ΄λ¦ μ§μ λΌμΈ κ²°ν©
λͺ μμ λ° μμμ μ΄λ¦ μ§μ λΌμΈμ κ²°ν©νμ¬ λ 볡μ‘νκ³ λ§μΆ€νλ λ μ΄μμμ λ§λ€ μ μμ΅λλ€. μλ₯Ό λ€μ΄, νΉμ μμμ λν νΉμ μ μ΄λ₯Ό μ 곡νκΈ° μν΄ μΌλΆ λΌμΈμ λͺ μμ μΌλ‘ λͺ λͺ νκ³ λλ¨Έμ§ κ·Έλ¦¬λλ μμμ μ΄λ¦ μ§μ λΌμΈμ μμ‘΄ν μ μμ΅λλ€.
.grid-container {
display: grid;
grid-template-columns: [sidebar] 200px [main-content] 1fr [end];
grid-template-rows: [header] auto [main] 1fr [footer] auto;
}
.sidebar {
grid-column: sidebar-start / sidebar-end;
grid-row: main-start / footer;
}
.main-content {
grid-column: main-content-start / end;
grid-row: main-start / footer;
}
μ΄ μμ μμλ νΉμ μ μ΄λ₯Ό μν΄ λ§μ§λ§ μ΄ λΌμΈμ "end"λ‘ λͺ μμ μΌλ‘ λͺ λͺ νκ³ λλ¨Έμ§ κ·Έλ¦¬λλ μμμ μ΄λ¦ μ§μ λΌμΈμ μμ‘΄νμ΅λλ€.
2. μ΄λ¦ μ§μ λΌμΈκ³Ό ν¨κ» span μ¬μ©
span ν€μλλ μ΄λ¦ μ§μ λΌμΈκ³Ό ν¨κ» μ¬μ©νμ¬ νλͺ©μ΄ μ°¨μ§ν΄μΌ ν νΈλ μλ₯Ό μ§μ ν μ μμ΅λλ€. μ΄λ νλͺ©μ΄ μ¬λ¬ μ΄μ΄λ νμ μ°¨μ§ν΄μΌ νλ λ μ΄μμμ λ§λλ λ° μ μ©ν μ μμ΅λλ€.
.grid-container {
display: grid;
grid-template-columns: [col1] 1fr [col2] 1fr [col3] 1fr;
grid-template-rows: [row1] auto [row2] 1fr;
}
.item {
grid-column: col1 / span 2;
grid-row: row1 / row2;
}
μ΄ μμ μμ νλͺ©μ "col1" λΌμΈμμ μμνμ¬ λ κ°μ μ΄μ κ±Έμ³ νμλ©λλ€.
μ κ·Όμ± κ³ λ € μ¬ν
CSS 그리λλ κ°λ ₯ν λ μ΄μμ κΈ°λ₯μ μ 곡νμ§λ§ λͺ¨λ μ¬μ©μκ° λ μ΄μμμ μ κ·Όν μ μλλ‘ νλ κ²μ΄ μ€μν©λλ€. μμμ μ΄λ¦ μ§μ λΌμΈμ μ¬μ©ν λ λ€μ μ¬νμ κ³ λ €νμΈμ.
- μλ§¨ν± HTML: μλ§¨ν± HTML μμλ₯Ό μ¬μ©νμ¬ μ½ν μΈ λ₯Ό λ Όλ¦¬μ μΌλ‘ ꡬ쑰ννμΈμ. μ΄λ μ€ν¬λ¦° 리λ λ° κΈ°ν 보쑰 κΈ°μ μ΄ μ½ν μΈ μ μλ―Έλ₯Ό μ΄ν΄νλ λ° λμμ΄ λ©λλ€.
- ARIA μμ±: ARIA μμ±μ μ¬μ©νμ¬ λ μ΄μμμ ꡬ쑰μ λͺ©μ μ λν μΆκ° μ 보λ₯Ό μ 곡νμΈμ. μλ₯Ό λ€μ΄,
role="region"μ μ¬μ©νμ¬ νμ΄μ§μ κ°λ³ μμμ μλ³νμΈμ. - μ΄μ κ΄λ¦¬: μ¬μ©μκ° ν€λ³΄λλ₯Ό μ¬μ©νμ¬ λ μ΄μμμ νμν μ μλλ‘ νμΈμ. μ΄μ μμμ μ£Όμλ₯Ό κΈ°μΈμ΄κ³ νμ¬ μ΄μ μ΄ λ§μΆ°μ§ μμλ₯Ό λνλ΄λ μκ°μ λ¨μλ₯Ό μ 곡νμΈμ.
- μμ λλΉ: μκ° μ₯μ κ° μλ μ¬μ©μκ° μ½ν μΈ λ₯Ό μ½μ μ μλλ‘ ν μ€νΈμ λ°°κ²½ κ°μ μΆ©λΆν μμ λλΉλ₯Ό 보μ₯νμΈμ.
- 보쑰 κΈ°μ λ‘ ν μ€νΈ: μ κΈ°μ μΌλ‘ μ€ν¬λ¦° 리λ λ° κΈ°ν 보쑰 κΈ°μ λ‘ λ μ΄μμμ ν μ€νΈνμ¬ μ κ·Όμ± λ¬Έμ λ₯Ό μλ³νκ³ ν΄κ²°νμΈμ.
μΌλ°μ μΈ λ¬Έμ ν΄κ²°
μμμ μ΄λ¦ μ§μ λΌμΈμ λν΄ μ μ΄ν΄νκ³ μλλΌλ λͺ κ°μ§ λ¬Έμ μ μ§λ©΄ν μ μμ΅λλ€. λ€μμ λͺ κ°μ§ μΌλ°μ μΈ λ¬Έμ μ κ·Έ ν΄κ²° λ°©λ²μ λλ€.
- μμ νλ©΄μμ λ μ΄μμμ΄ κΉ¨μ§: λ―Έλμ΄ μΏΌλ¦¬λ₯Ό μ¬μ©νμ¬ λ€λ₯Έ νλ©΄ ν¬κΈ°μ λ§κ² 그리λ ꡬ쑰λ₯Ό μ‘°μ νμ¬ κ·Έλ¦¬λ λ μ΄μμμ΄ λ°μνμΈμ§ νμΈνμΈμ.
- μμμΉ λͺ»ν νλͺ© λ°°μΉ: 그리λ λΌμΈ μ΄λ¦μ λ€μ νμΈνκ³ κ° νλͺ©μ μ¬λ°λ₯Έ μμ λ° λ λΌμΈμ μ¬μ©νκ³ μλμ§ νμΈνμΈμ. λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμ¬ κ·Έλ¦¬λλ₯Ό κ²μ¬νκ³ μλͺ»λ μ λ ¬μ μλ³νμΈμ.
- μ±λ₯ λ¬Έμ : λ무 λ§μ νΈλκ³Ό νλͺ©μΌλ‘ μ§λμΉκ² 볡μ‘ν 그리λ λ μ΄μμμ λ§λ€μ§ λ§μΈμ. 그리λ ꡬ쑰λ₯Ό λ¨μννκ³ CSS μ½λλ₯Ό μ΅μ ννμ¬ μ±λ₯μ ν₯μμν€μΈμ.
- μ€νμΌ μΆ©λ: λ€λ₯Έ CSS κ·μΉκ³Όμ μ μ¬μ μΈ μ€νμΌ μΆ©λμ μ μνμΈμ. νΉμ μ±μ μ¬μ©νμ¬ κ·Έλ¦¬λ μ€νμΌμ΄ μ¬λ°λ₯΄κ² μ μ©λλλ‘ νμΈμ.
κ²°λ‘
μμμ μ΄λ¦ μ§μ λΌμΈμ μΉ λ μ΄μμμ ν¬κ² λ¨μννκ³ ν₯μμν¬ μ μλ CSS 그리λμ κ·μ€ν κΈ°λ₯μ λλ€. ꡬ문, μ΄μ λ° λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄ν¨μΌλ‘μ¨ μ΄ κ°λ ₯ν λꡬλ₯Ό νμ©νμ¬ μ μΈκ³ μ¬μ©μλ₯Ό μν λ μ½κΈ° μ½κ³ μ μ§ κ΄λ¦¬νκΈ° μ¬μ°λ©° μ μ°ν 그리λ λ μ΄μμμ λ§λ€ μ μμ΅λλ€. λ μ΄μμμ λμμΈν λ μΈμ΄, μ½ν μΈ , λ¬Έν λ° μ κ·Όμ±μ κ³ λ €νμ¬ λͺ¨λ μ¬λμκ² ν¬μ©μ μ΄κ³ μ¬μ©μ μΉνμ μΈμ§ νμΈνλ κ²μ μμ§ λ§μΈμ.
CSS 그리λλ₯Ό κ³μ νμνλ©΄μ μμμ μ΄λ¦ μ§μ λΌμΈμ μ€ννκ³ μ΄κ²μ΄ μμ νλ¦κ³Ό μΉ κ°λ° νλ‘μ νΈμ νμ§μ μ΄λ»κ² ν₯μμν¬ μ μλμ§ λ°κ²¬ν΄ 보μΈμ. μλ λΌμΈ μ΄λ¦ μμ±μ νμ λ°μλ€μ΄κ³ CSS 그리λμ λͺ¨λ μ μ¬λ ₯μ λ°ννμΈμ.