CSS Subgridμ νλ¦ λ°©ν₯ μμμ μ΄ν΄νκΈ° μν ν¬κ΄μ μΈ κ°μ΄λλ‘, μ€μ²© 그리λκ° κΈλ‘λ² μΉ κ°λ°μ μν΄ λΆλͺ¨μ λ°©ν₯μ μ΄λ»κ² μ μνλμ§ νꡬν©λλ€.
CSS Subgrid νλ¦ λ°©ν₯: μ€μ²© 그리λ λ°©ν₯ μμ μ΄ν΄νκΈ°
λμμμ΄ μ§ννλ μΉ λμμΈ νκ²½μμ CSS Gridλ 볡μ‘νκ³ λ°μνμΈ λ μ΄μμμ λ§λλ κ°λ ₯ν λκ΅¬λ‘ λΆμνμ΅λλ€. CSS Subgridμ λ±μ₯μΌλ‘ 그리λ μμ€ν μ κΈ°λ₯μ λμ± ν₯μλμμΌλ©°, νΉν μ€μ²©λ 그리λκ° λΆλͺ¨ 컨ν μ΄λλ₯Ό μμνκ³ μ μνλ λ°©μμμ κ·Έλ¬ν©λλ€. μ΄λ¬ν μμμ μ€μνμ§λ§ λλ‘λ κ°κ³Όλλ μΈ‘λ©΄μ΄ λ°λ‘ νλ¦ λ°©ν₯(flow direction)μ λλ€. μ΄ κΈμμλ CSS Subgridμ νλ¦ λ°©ν₯μ΄ μ΄λ»κ² μλνλμ§, κΈλ‘λ² μΉ κ°λ°μ λ―ΈμΉλ μν₯, κ·Έλ¦¬κ³ κ·Έ κ°λ ₯ν¨μ 보μ¬μ£Όλ μ€μ©μ μΈ μμ μ λν΄ κΉμ΄ νκ³ λλλ€.
CSS Subgridλ 무μμΈκ°?
νλ¦ λ°©ν₯μ λν΄ μμΈν μμ보기 μ μ, Subgridκ° μ 곡νλ κΈ°λ₯μ λν΄ κ°λ¨ν μμ½ν΄ λ³΄κ² μ΅λλ€. Subgridλ CSS Gridμ κ°λ ₯ν νμ₯ κΈ°λ₯μΌλ‘, 그리λ μμ΄ν λ΄μ μμ΄ν λ€μ΄ μ체μ μΈ λ 립λ 그리λ 컨ν μ€νΈλ₯Ό μμ±νλ λμ λΆλͺ¨ 그리λμ 그리λ λΌμΈμ λ§μΆ° μ λ ¬λ μ μλλ‘ ν©λλ€. μ΄λ μ€μ²©λ 그리λκ° μ‘°μμ νΈλ ν¬κΈ° λ° μ λ ¬μ μ ννκ² μμλ°μ 볡μ‘ν μ»΄ν¬λνΈ μ λ°μ κ±Έμ³ λ μΌκ΄λκ³ μ‘°νλ‘μ΄ λ μ΄μμμ λ§λ€ μ μμμ μλ―Έν©λλ€.
μ΄λ―Έμ§, μ λͺ©, μ€λͺ μ΄ ν¬ν¨λ μΉ΄λ μ»΄ν¬λνΈλ₯Ό μμν΄ λ³΄μΈμ. μ΄ μΉ΄λκ° λ ν° κ·Έλ¦¬λ λ΄μ λ°°μΉλλ©΄, Subgridλ μΉ΄λμ λ΄λΆ μμλ€μ΄ λ©μΈ 그리λμ μ΄κ³Ό νμ μ λ ¬λλλ‘ νμ¬ μΉ΄λ μμ²΄κ° ν¬κΈ° μ‘°μ λκ±°λ μ΄λλ λμλ μλ²½ν μ λ ¬μ 보μ₯ν©λλ€.
그리λ νλ¦ λ°©ν₯ μ΄ν΄νκΈ°
CSS Gridμ νλ¦ λ°©ν₯μ 그리λ 컨ν
μ΄λ λ΄μ μμ΄ν
μ΄ λ°°μΉλλ μμλ₯Ό μλ―Έν©λλ€. μ΄λ μ£Όλ‘ grid-auto-flow μμ±μ μν΄ μ μ΄λλ©°, λ κ·Όλ³Έμ μΌλ‘λ λ¬Έμμ κ·Έ λΆλͺ¨ μμμ writing-modeμ μν΄ κ²°μ λ©λλ€.
νμ€μ μΈ μν μ°κΈ° λͺ¨λ(μμ΄ λλ λλΆλΆμ μμ μΈμ΄μ κ°μ)μμλ 그리λ μμ΄ν μ΄ μΌμͺ½μμ μ€λ₯Έμͺ½μΌλ‘, κ·Έλ¦¬κ³ μμμ μλλ‘ νλ¦ λλ€. λ°λλ‘, μμ§ μ°κΈ° λͺ¨λ(μ ν΅μ μΈ λͺ½κ³¨μ΄ λλ μΌλΆ λμμμ μΈμ΄μ κ°μ)μμλ μμ΄ν μ΄ μμμ μλλ‘, κ·Έλ¦¬κ³ μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ νλ¦ λλ€.
νλ¦ λ°©ν₯μ μν₯μ λ―ΈμΉλ μ£Όμ μμ±μ λ€μκ³Ό κ°μ΅λλ€:
grid-auto-flow: μ΄ μμ±μ μλ λ°°μΉλ μμ΄ν μ΄ κ·Έλ¦¬λμ μΆκ°λλ λ°©μμ κ²°μ ν©λλ€. κΈ°λ³Έκ°μrowλ‘, μμ΄ν μ΄ μΌμͺ½μμ μ€λ₯Έμͺ½μΌλ‘ νμ μ±μ΄ ν λ€μ νμΌλ‘ μ΄λν¨μ μλ―Έν©λλ€.columnμ μ΄μ λ°λλ‘, μμμ μλλ‘ μ΄μ μ±μ΄ ν λ€μ μ΄λ‘ μ΄λν©λλ€.writing-mode: μ΄ CSS μμ±μ ν μ€νΈ νλ¦κ³Ό λ μ΄μμμ λ°©ν₯μ μ μν©λλ€. μΌλ°μ μΈ κ°μΌλ‘λhorizontal-tb(μν, μμμ μλλ‘)μvertical-rl(μμ§, μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘),vertical-lr(μμ§, μΌμͺ½μμ μ€λ₯Έμͺ½μΌλ‘)κ³Ό κ°μ λ€μν μμ§ λͺ¨λκ° μμ΅λλ€.
Subgridμ λ°©ν₯ μμ
μ΄ λΆλΆμ΄ λ°λ‘ Subgridμ μ§μ ν νμ΄ λ°νλλ μ§μ μ΄λ©°, νΉν κ΅μ νμ μμ΄ λμ± κ·Έλ μ΅λλ€. 그리λ μμ΄ν
μ΄ μλΈκ·Έλ¦¬λ 컨ν
μ΄λκ° λλ©΄(display: subgrid μ¬μ©), λΆλͺ¨ 그리λμ μμ±μ μμλ°μ΅λλ€. κ²°μ μ μΌλ‘, λΆλͺ¨ 그리λμ νλ¦ λ°©ν₯μ΄ μλΈκ·Έλ¦¬λμ νλ¦ λ°©ν₯μ μν₯μ λ―ΈμΉ©λλ€.
μμΈν μ΄ν΄λ³΄κ² μ΅λλ€:
1. κΈ°λ³Έ μν νλ¦
writing-mode: horizontal-tbλ₯Ό μ¬μ©νλ μΌλ°μ μΈ μ€μ μμ λΆλͺ¨ 그리λλ μμ΄ν
μ μΌμͺ½μμ μ€λ₯Έμͺ½μΌλ‘, μμμ μλλ‘ λ°°μΉν©λλ€. λ§μ½ κ·Έ λΆλͺ¨ 그리λ λ΄μ μμ μμ λν μλΈκ·Έλ¦¬λλΌλ©΄, κ·Έ μμ΄ν
λ€μ μ΄ μν νλ¦μ μμλ°κ² λ©λλ€. μ΄λ μλΈκ·Έλ¦¬λ λ΄μ μμ΄ν
λ€λ μΌμͺ½μμ μ€λ₯Έμͺ½μΌλ‘ λ°°μ΄λλ€λ κ²μ μλ―Έν©λλ€.
μμ:
λ κ°μ μ΄μ κ°μ§ λΆλͺ¨ 그리λλ₯Ό μκ°ν΄ λ΄
μλ€. μ΄ λΆλͺ¨ 그리λ λ΄μ divλ display: subgridλ‘ μ€μ λκ³ μ²« λ²μ§Έ μ΄μ λ°°μΉλ©λλ€. μ΄ μλΈκ·Έλ¦¬λ μ체μ μΈ κ°μ μμ΄ν
μ΄ ν¬ν¨λμ΄ μλ€λ©΄, κ·Έλ€μ μμ°μ€λ½κ² ν΄λΉ μλΈκ·Έλ¦¬λμ ν λΉλ κ³΅κ° λ΄μμ μΌμͺ½μμ μ€λ₯Έμͺ½μΌλ‘ νλ₯΄λ©° λΆλͺ¨ 그리λμ μ΄ κ΅¬μ‘°μ μ λ ¬λ©λλ€.
2. μμ§ μ°κΈ° λͺ¨λμ Subgrid
μμ§ μ°κΈ° λͺ¨λλ₯Ό λμ
νλ©΄ μ§μ ν λ§λ²μ΄ μΌμ΄λ©λλ€. λ§μ½ λΆλͺ¨ 그리λκ° writing-mode: vertical-rl(μ ν΅μ μΈ λμμμ νμ΄ν¬κ·ΈλνΌμμ νν μ¬μ©) νμμ μλνλ€λ©΄, κ·Έ μμ΄ν
λ€μ μμμ μλλ‘, κ·Έλ¦¬κ³ μ΄μ κ°λ‘μ§λ¬ μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ νλ₯Ό κ²μ
λλ€. μ΄ λΆλͺ¨ 그리λ λ΄μ μμ μμκ° μλΈκ·Έλ¦¬λμΌ λ, κ·Έ μλΈκ·Έλ¦¬λλ μ΄ μμ§ νλ¦ λ°©ν₯μ μμλ°μ΅λλ€.
μμ:
writing-mode: vertical-rlμ μ¬μ©νλ μΌλ³Έμ΄ μΉμ¬μ΄νΈλ₯Ό μν΄ μ€κ³λ λΆλͺ¨ 그리λλ₯Ό μμν΄ λ³΄μΈμ. μ£Όλ μ½ν
μΈ λ μλμͺ½μΌλ‘ νλ¦
λλ€. μ΄μ , μ΄ λΆλͺ¨ 그리λμ μ
μ€ νλ μμ 볡μ‘ν λ΄λΉκ²μ΄μ
λ©λ΄λ μ ν λͺ©λ‘μ΄ μλ€κ³ κ°μ ν΄ λ΄
μλ€. μ΄ μ€μ²©λ κ΅¬μ‘°κ° μλΈκ·Έλ¦¬λλΌλ©΄, κ·Έ μμ΄ν
λ€(μ: κ°λ³ λ΄λΉκ²μ΄μ
λ§ν¬ λλ μ ν μΉ΄λ) λν λΆλͺ¨μ νλ¦μ κ·Έλλ‘ λ°μνμ¬ μμ§μΌλ‘, μμμ μλλ‘, κ·Έλ¦¬κ³ μ΄μ κ°λ‘μ§λ¬ μ€λ₯Έμͺ½μμ μΌμͺ½μΌλ‘ νλ₯Ό κ²μ
λλ€.
μ΄λ¬ν μλμ μΈ νλ¦ λ°©ν₯ μ μμ λ€μκ³Ό κ°μ κ²½μ°μ μλΉν μ΄μ μ μ 곡ν©λλ€:
- λ€κ΅μ΄ μΉμ¬μ΄νΈ: κ°λ°μλ κ΄λ²μν μ‘°κ±΄λΆ CSSλ 볡μ‘ν JavaScript ν΄κ²° λ°©λ² μμ΄λ, λ€μν μΈμ΄μ μ°κΈ° μμ€ν μ λ§κ² μμ΄ν νλ¦μ μλμΌλ‘ μ‘°μ νλ λ¨μΌνκ³ κ²¬κ³ ν 그리λ ꡬ쑰λ₯Ό λ§λ€ μ μμ΅λλ€.
- κΈλ‘λ² μ ν리μΌμ΄μ : μ μΈκ³ μ¬μ©μλ₯Ό μν΄ μ€κ³λ μ¬μ©μ μΈν°νμ΄μ€λ μ¬μ©μμ λ‘μΌμΌ λ° μ νΈνλ μ°κΈ° λ°©ν₯μ κ΄κ³μμ΄ μκ°μ μΌκ΄μ±κ³Ό λ Όλ¦¬μ μΈ μμ΄ν μμλ₯Ό μ μ§ν μ μμ΅λλ€.
3. Subgridμμ grid-auto-flow λͺ
μμ μΌλ‘ μ€μ νκΈ°
Subgridλ writing-modeμ μν΄ κ²°μ λλ μ£Όλ νλ¦ λ°©ν₯μ μμλ°μ§λ§, grid-auto-flowλ₯Ό μ¬μ©νμ¬ μλΈκ·Έλ¦¬λ λ΄ μλ λ°°μΉ μμ΄ν
μ λ°°μΉλ₯Ό λͺ
μμ μΌλ‘ μ μ΄ν μ μμ΅λλ€. κ·Έλ¬λ μ΄κ²μ΄ μμλ λ°©ν₯κ³Ό μ΄λ»κ² μνΈμμ©νλμ§ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€.
- λΆλͺ¨ 그리λμ νλ¦μ΄
row(μΌμͺ½μμ μ€λ₯Έμͺ½)μΈ κ²½μ°, μλΈκ·Έλ¦¬λμgrid-auto-flow: columnμ μ€μ νλ©΄ μμ΄ν μ΄ μλΈκ·Έλ¦¬λ μμ λ΄μμ μμ§μΌλ‘ μμ΄κ² λ©λλ€. - λΆλͺ¨ 그리λμ νλ¦μ΄
column(μμ§ μ°κΈ° λͺ¨λλ‘ μΈν΄ μμμ μλλ‘)μΈ κ²½μ°, μλΈκ·Έλ¦¬λμgrid-auto-flow: rowλ₯Ό μ€μ νλ©΄ λΆλͺ¨μ μμ§ νλ¦μλ λΆκ΅¬νκ³ μμ΄ν μ΄ μλΈκ·Έλ¦¬λ μμ λ΄μμ μνμΌλ‘ λ°°μ΄λ©λλ€. μ΄λ μ μμ μΌλ‘ μ§ν₯λλ 그리λ λ΄μμ κ΅μμ μΈ λ³νμ λ§λλ κ°λ ₯ν λ°©λ²μ΄ λ μ μμ΅λλ€.
ν΅μ¬ μμ½: λΆλͺ¨ 그리λμ writing-modeλ μλΈκ·Έλ¦¬λμ *μ λ°μ μΈ* νλ¦ λ°©ν₯μ κ²°μ νλ μ§λ°°μ μΈ μμμ
λλ€. κ·Έ ν grid-auto-flowλ μμλ λ°©ν₯ λ΄μμ μμ΄ν
μ΄ μ±μμ§λ λ°©μμ μΈλΆμ μΌλ‘ μ‘°μ ν©λλ€.
μ€μ©μ ν¨μ λ° μ¬μ© μ¬λ‘
Subgridμ μν νλ¦ λ°©ν₯ μμμ μ μ§λ³΄μ κ°λ₯νκ³ μ μΈκ³λ₯Ό κ³ λ €ν μΉ μ ν리μΌμ΄μ μ λ§λλ λ° κΉμ ν¨μλ₯Ό κ°μ§λλ€.
1. μΌκ΄λ κ΅μ ν
μ ν΅μ μΌλ‘, λ€λ₯Έ μ°κΈ° λͺ¨λλ₯Ό μ§μνλ κ²μ μ’
μ’
CSSλ₯Ό 볡μ νκ±°λ 볡μ‘ν μ νμλ₯Ό μ¬μ©νλ κ²μ μꡬνμ΅λλ€. Subgridλ₯Ό μ¬μ©νλ©΄ λ¨μΌ HTML κ΅¬μ‘°κ° μ°μνκ² μ μν μ μμ΅λλ€. μλ₯Ό λ€μ΄, λμ보λμλ μ£Ό μ½ν
μΈ μμκ³Ό μ¬μ΄λλ°κ° μμ μ μμ΅λλ€. μ£Ό μ½ν
μΈ μμμ΄ μμ΄ν
μ΄ μνμΌλ‘ νλ₯΄λ 그리λλ₯Ό μ¬μ©νκ³ , μ¬μ΄λλ°κ° μμ΄ν
μ΄ μμ§μΌλ‘ νλ₯΄λ 그리λ(μλ§λ λ€λ₯Έ writing-modeλ νΉμ λ μ΄μμ μꡬμ¬ν λλ¬Έ)λ₯Ό μ¬μ©νλ κ²½μ°, Subgridλ κ° μ€μ²©λ μ»΄ν¬λνΈκ° λΆλͺ¨ 그리λμ ꡬ쑰μ λΌμΈμ μ λ ¬λλ©΄μλ μ체μ μ§λ°°μ μΈ νλ¦μ μ‘΄μ€νλλ‘ λ³΄μ₯ν©λλ€.
2. 볡μ‘ν μ»΄ν¬λνΈ λμμΈ
λ°μ΄ν° ν
μ΄λΈμ΄λ νΌ λ μ΄μμκ³Ό κ°μ 볡μ‘ν UI μ»΄ν¬λνΈλ₯Ό μκ°ν΄ 보μΈμ. ν
μ΄λΈ ν€λλ λΆλͺ¨ 그리λμ μ΄μ μ λ ¬λλ μ
μ κ°μ§ μ μμ΅λλ€. λ§μ½ ν
μ΄λΈ λ³Έλ¬Έμ΄ μλΈκ·Έλ¦¬λλΌλ©΄, κ·Έ νκ³Ό μ
μ μ λ°μ μΈ νλ¦μ μμλ°κ² λ©λλ€. writing-modeκ° λ³κ²½λλ©΄, Subgridλ₯Ό ν΅ν΄ ν
μ΄λΈ ν€λμ λ³Έλ¬Έμ μμ°μ€λ½κ² μμ΄ν
νλ¦μ μ¬μ λ ¬νμ¬ μ 체μ μΈ κ·Έλ¦¬λ ꡬ쑰μμ κ΄κ³λ₯Ό μ μ§ν©λλ€.
μμ: μ ν μΉ΄νλ‘κ·Έ
μ μμκ±°λ μ¬μ΄νΈλ₯Ό ꡬμΆνκ³ μλ€κ³ κ°μ ν΄ λ΄ μλ€. λ©μΈ νμ΄μ§λ μ ν μΉ΄λλ₯Ό νμνλ 그리λμ λλ€. κ° μ ν μΉ΄λλ νλμ μ»΄ν¬λνΈμ λλ€. μ ν μΉ΄λ μμλ μ΄λ―Έμ§, μ νλͺ , κ°κ²©, κ·Έλ¦¬κ³ "μ₯λ°κ΅¬λμ λ΄κΈ°" λ²νΌμ΄ μμ΅λλ€. λ§μ½ μ ν μΉ΄λ μμ²΄κ° μλΈκ·Έλ¦¬λμ΄κ³ μ 체 νμ΄μ§κ° νμ€μ μΈ μν νλ¦μ μ¬μ©νλ€λ©΄, μΉ΄λ λ΄μ μμλ€λ μνμΌλ‘ νλ₯Ό κ²μ λλ€.
μ΄μ , νΉμ νλ‘λͺ¨μ λ°°λκ° μ λͺ©μ μμ§ ν μ€νΈ λ°©ν₯μ μ¬μ©νκ³ μ΄ λ°°λκ° κ·Έλ¦¬λ μ λ΄μ λ°°μΉλλ μλ리μ€λ₯Ό μμν΄ λ³΄μΈμ. λ§μ½ μ΄ λ°°λ μ»΄ν¬λνΈκ° μλΈκ·Έλ¦¬λλΌλ©΄, κ·Έ λ΄λΆ μμλ€(μ λͺ©κ³Ό μ½ν¬μ‘μ λ±)μ λΆλͺ¨ 그리λμ ꡬ쑰μ λΌμΈμ μ λ ¬λλ©΄μλ μ체 λ΄λΆμ μμ§ μμλ₯Ό μ μ§νλ©° μλμΌλ‘ μμ§μΌλ‘ νλ₯Ό κ²μ λλ€.
3. κ°μνλ λ°μν λμμΈ
λ°μν λμμΈμ μ’
μ’
νλ©΄ ν¬κΈ°μ λ°λΌ λ μ΄μμμ λ³κ²½νλ κ²μ ν¬ν¨ν©λλ€. Subgridμ νλ¦ λ°©ν₯ μμμ μ΄λ₯Ό λ¨μνν©λλ€. κΈ°λ³Έ 그리λ λ μ΄μμμ μ μν λ€μ, λ―Έλμ΄ μΏΌλ¦¬λ₯Ό μ¬μ©νμ¬ λΆλͺ¨ 컨ν
μ΄λμ writing-modeλ₯Ό λ³κ²½ν μ μμ΅λλ€. ν΄λΉ 컨ν
μ΄λ λ΄μ μλΈκ·Έλ¦¬λλ κ° μ€μ²©λ μμ€μ λν λͺ
μμ μΈ μ‘°μ μμ΄λ μμ΄ν
νλ¦μ μλμΌλ‘ μ‘°μ ν©λλ€.
κ³Όμ λ° κ³ λ €μ¬ν
κ°λ ₯νμ§λ§, Subgrid νλ¦ λ°©ν₯μΌλ‘ μμ ν λ λͺ κ°μ§ μ λ ν΄μΌ ν μ μ΄ μμ΅λλ€:
- λΈλΌμ°μ μ§μ: Subgridλ λΉκ΅μ μλ‘μ΄ κΈ°λ₯μ λλ€. μ΅μ λΈλΌμ°μ (Chrome, Firefox, Safari) μ λ°μμ μ§μμ΄ λΉ λ₯΄κ² μ¦κ°νκ³ μμ§λ§, νλ‘λμ νκ²½μμ μ¬μ©νκΈ° μ μ νμ¬ νΈνμ± νλ₯Ό νμΈνλ κ²μ΄ νμμ μ λλ€. ꡬν λΈλΌμ°μ λ₯Ό μν ν΄λ°±(fallback)μ΄ νμν μ μμ΅λλ€.
writing-modeμ΄ν΄: CSSwriting-modeμ λν νμ€ν μ΄ν΄κ° μ€μν©λλ€. Subgridμ λμμ μ‘°μμ μ°κΈ° λͺ¨λμ μ§μ μ μΌλ‘ μ°κ²°λμ΄ μμ΅λλ€.writing-modeκ° λ μ΄μμμ λ―ΈμΉλ μν₯μ μλͺ» μ΄ν΄νλ©΄ μμμΉ λͺ»ν κ²°κ³Όλ₯Ό μ΄λν μ μμ΅λλ€.- λͺ
μμ νλ¦ vs. μμμ νλ¦:
writing-modeκ° *μ£Όλ* νλ¦μ κ²°μ νμ§λ§,grid-auto-flowλ κ·Έ νλ¦ λ΄μμμ *μ±μ°κΈ° λ°©μ*μ μ¬μ μν μ μμμ κΈ°μ΅ν΄μΌ ν©λλ€. μνλ λ μ΄μμμ λ¬μ±νκΈ° μν΄μλ μ΄ μ΄μ€μ±μ μ μ€νκ² κ³ λ €ν΄μΌ ν©λλ€. - λλ²κΉ : λ€λ₯Έ κ³ κΈ CSS κΈ°λ₯κ³Ό λ§μ°¬κ°μ§λ‘, 볡μ‘νκ² μ€μ²©λ 그리λ ꡬ쑰λ₯Ό λλ²κΉ νλ κ²μ μ΄λ €μΈ μ μμ΅λλ€. λΈλΌμ°μ κ°λ°μ λꡬλ λ°μ΄λ 그리λ κ²μ¬ κΈ°λ₯μ μ 곡νλ©°, μ΄λ μμ΄ν λ°°μΉμ νλ¦ λ°©ν₯μ μ΄ν΄νλ λ° λ§€μ° μ μ©ν©λλ€.
κΈλ‘λ² κ°λ°μ μν λͺ¨λ² μ¬λ‘
κΈλ‘λ² μ¬μ©μλ₯Ό μν΄ Subgrid νλ¦ λ°©ν₯μ ν¨κ³Όμ μΌλ‘ νμ©νλ €λ©΄:
- μ μ°μ±μ κ³ λ €ν λμμΈ: κ³ μ λ ν½μ μμΉλ³΄λ€λ 그리λ λΌμΈκ³Ό νΈλ κ΄μ μμ λ μ΄μμμ μκ°νμΈμ. μ΄λ¬ν μ¬κ³ λ°©μμ μμ°μ€λ½κ² Subgridμ μμΉκ³Ό μΌμΉν©λλ€.
writing-modeμ λ΅μ μ¬μ©: μ ν리μΌμ΄μ μ΄ μ¬λ¬ μ°κΈ° λͺ¨λλ₯Ό μ§μν΄μΌ νλ€λ κ²μ μκ³ μλ€λ©΄, CSS μν€ν μ² μ΄κΈ°μ μ΄λ₯Ό μ μνμΈμ. Subgridκ° μ€μ²©λ λ μ΄μμμ μ‘°μ νλ νλ μμ μ μ²λ¦¬νκ² νμΈμ.- μ½ν μΈ μμ μ°μ μμ μ§μ : μκ°μ νλ¦ λ°©ν₯μ κ΄κ³μμ΄ μ½ν μΈ μ λ Όλ¦¬μ μμκ° μλ―Έμ μ¬λ°λ₯΄κ² μ μ§λλλ‘ νμΈμ. 보쑰 κΈ°μ μ μ΄ λ Όλ¦¬μ μμμ μμ‘΄ν©λλ€.
- μ€μ λ‘μΌμΌλ‘ ν μ€νΈ: μ΄λ‘ μ μ΄ν΄μλ§ μμ‘΄νμ§ λ§μΈμ. λ€μν μΈμ΄μ μ°κΈ° λͺ¨λμ μ€μ μ½ν μΈ λ‘ λ μ΄μμμ ν μ€νΈνμΈμ.
- λͺ νν ν΄λ°± μ 곡: Subgridλ₯Ό μ§μνμ§ μλ ꡬν λΈλΌμ°μ μ κ²½μ°, λ μ΄μμμ΄ μ κ΅νμ§ μλλΌλ κΈ°λ₯μ μ΄κ³ μ½κΈ° μ½κ² μ μ§λλλ‘ νμΈμ.
Subgridμ ν¨κ»νλ λ μ΄μμμ λ―Έλ
CSS Subgrid, νΉν κ·Έ νλ¦ λ°©ν₯μ μμμ μΉμ μν μ μΈμ λ μ΄μμμμ μλΉν λμ½μ μλ―Έν©λλ€. μ΄λ κ°λ°μκ° λ μ μ μ½λμ 볡μ‘μ±μΌλ‘ λ κ²¬κ³ νκ³ , μ μλ ₯ μμΌλ©°, κ΅μ μ μΌλ‘ μΉνμ μΈ μΈν°νμ΄μ€λ₯Ό ꡬμΆν μ μλλ‘ νμ μ€μ΄μ€λλ€.
μΉ μ ν리μΌμ΄μ μ΄ μ μ λ κΈλ‘λ²νλ¨μ λ°λΌ, μ€μ²©λ λ μ΄μμ μμ€ν μ΄ λ€μν μ½κΈ° λ° μ°κΈ° λ°©ν₯μ μ΄ν΄νκ³ μ μνλ λ₯λ ₯μ λ¨μν νΈμκ° μλλΌ νμμ λλ€. Subgridλ κ΅μ νκ° μ°λ¦¬ λ μ΄μμ μμ€ν μ ꡬ쑰 μ체μ λ΄μ₯λλ λ―Έλλ₯Ό μν κΈΈμ λ¦κ³ μμΌλ©°, μΉμ λͺ¨λ μ¬λ, λͺ¨λ κ³³μμ μ§μ μΌλ‘ μ κ·Ό κ°λ₯νκ³ μΌκ΄λ κ²½νμΌλ‘ λ§λ€κ³ μμ΅λλ€.
μμ½
CSS Subgridμ νλ¦ λ°©ν₯ μμμ μ€μ²© 그리λκ° λΆλͺ¨ 그리λμ μ£Όλ νλ¦ λ°©ν₯(μΌμͺ½μμ μ€λ₯Έμͺ½, μ€λ₯Έμͺ½μμ μΌμͺ½, μμμ μλλ‘, μλμμ μλ‘)μ μ±νν μ μκ² νλ κ°λ ₯ν λ©μ»€λμ¦μΌλ‘, μ£Όλ‘ writing-mode μμ±μ μν΄ μν₯μ λ°μ΅λλ€. μ΄ κΈ°λ₯μ κ΅μ νλ₯Ό λ¨μννκ³ , λ°μν λμμΈμ ν₯μμν€λ©°, λ μΌκ΄μ± μκ³ λ³΅μ‘ν μ»΄ν¬λνΈ μν€ν
μ²λ₯Ό κ°λ₯νκ² ν©λλ€. μ΄λ¬ν μμΉμ μ΄ν΄νκ³ μ λ΅μ μΌλ‘ μ μ©ν¨μΌλ‘μ¨ κ°λ°μλ λ€μν κΈλ‘λ² μ¬μ©μλ₯Ό μν λ ν¬μ©μ μ΄κ³ μ μλ ₯ μλ μΉ κ²½νμ ꡬμΆν μ μμ΅λλ€.
Subgridμ νμ λ°μλ€μ¬ CSS λ μ΄μμμμ μλ‘μ΄ μμ€μ μ μ΄λ ₯κ³Ό μ μ°μ±μ μ κΈ ν΄μ νμΈμ!