CSS λ΄μ¬μ ν¬κΈ° μ’ ν‘λΉμ λν μ¬μΈ΅ λΆμμΌλ‘, μ½ν μΈ λΉμ¨ κ³μ°, ꡬν κΈ°μ λ° λ°μν μΉ λμμΈμ μν λͺ¨λ² μ¬λ‘λ₯Ό λ€λ£Ήλλ€.
CSS λ΄μ¬μ ν¬κΈ° μ’ ν‘λΉ: μ½ν μΈ λΉμ¨ κ³μ° λ§μ€ν°νκΈ°
μΉ κ°λ°μ μλμ μΈ μΈκ³μμ μ½ν μΈ κ° λ€μν νλ©΄ ν¬κΈ°μμ λΉμ¨μ μ μ§νλλ‘ νλ κ²μ λ§€μ° μ€μν©λλ€. CSS λ΄μ¬μ ν¬κΈ° μ’ ν‘λΉλ μ΄λ¬ν λ¬Έμ μ λν κ°λ ₯ν μ루μ μ μ 곡ν©λλ€. μ΄ μ’ ν© κ°μ΄λλ μ΄ κΈ°μ μ 볡μ‘μ±μ μμΈν μ΄ν΄λ³΄κ³ λ°μνμ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ μΉμ¬μ΄νΈλ₯Ό λ§λλ λ° νμν μ§μκ³Ό λꡬλ₯Ό μ 곡ν©λλ€.
CSSμμ λ΄μ¬μ ν¬κΈ° μ΄ν΄
μ’ ν‘λΉμ λν΄ μμ보기 μ μ CSSμμ λ΄μ¬μ ν¬κΈ°λ₯Ό μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. λ΄μ¬μ ν¬κΈ°λ μ½ν μΈ μ μν΄ κ²°μ λλ μμμ μμ°μ€λ¬μ΄ ν¬κΈ°λ₯Ό λνλ λλ€. μλ₯Ό λ€μ΄ μ΄λ―Έμ§μ λ΄μ¬μ λλΉμ λμ΄λ μ΄λ―Έμ§ νμΌμ μ€μ ν½μ ν¬κΈ°λ‘ μ μλ©λλ€.
λ€μ μλ리μ€λ₯Ό κ³ λ €νμμμ€.
- μ΄λ―Έμ§: λ΄μ¬μ ν¬κΈ°λ μ΄λ―Έμ§ νμΌ μ체μ λλΉμ λμ΄μ λλ€(μ: 1920x1080 ν½μ μ΄λ―Έμ§μ λ΄μ¬μ λλΉλ 1920pxμ΄κ³ λ΄μ¬μ λμ΄λ 1080pxμ).
- λΉλμ€: μ΄λ―Έμ§μ μ μ¬νκ² λ΄μ¬μ ν¬κΈ°λ λΉλμ€μ ν΄μλμ ν΄λΉν©λλ€.
- κΈ°ν μμ: λͺ μμ μΌλ‘ μ€μ λ ν¬κΈ°λ μ½ν μΈ κ° μλ λΉ `div` μμμ κ°μ μΌλΆ μμλ μ²μμλ λ΄μ¬μ ν¬κΈ°κ° μμ΅λλ€. ν¬κΈ°λ₯Ό κ²°μ νκΈ° μν΄ μ£Όλ³ μμ λλ CSS μ€νμΌκ³Ό κ°μ λ€λ₯Έ μμμ μμ‘΄ν©λλ€.
μ’ ν‘λΉλ 무μμ λκΉ?
μ’ ν‘λΉλ μμμ λλΉμ λμ΄ μ¬μ΄μ λΉλ‘ κ΄κ³μ λλ€. μΌλ°μ μΌλ‘ λλΉ:λμ΄(μ: 16:9, 4:3, 1:1)λ‘ ννλ©λλ€. μ’ ν‘λΉλ₯Ό μ μ§νλ©΄ ν¬κΈ°κ° μ‘°μ λ λ μμκ° μ곑λμ§ μμ΅λλ€.
κ³Όκ±°μλ κ°λ°μκ° JavaScript λλ padding-bottom ν΄νΉμ μμ‘΄νμ¬ μ’ ν‘λΉλ₯Ό μ μ§νμ΅λλ€. κ·Έλ¬λ CSS `aspect-ratio` μμ±μ ν¨μ¬ λ κΉλνκ³ ν¨μ¨μ μΈ μ루μ μ μ 곡ν©λλ€.
`aspect-ratio` μμ±
`aspect-ratio` μμ±μ μ¬μ©νλ©΄ μμμ κΈ°λ³Έ μ’ ν‘λΉλ₯Ό μ§μ ν μ μμ΅λλ€. κ·Έλ° λ€μ λΈλΌμ°μ λ μ΄ λΉμ¨μ μ¬μ©νμ¬ λ€λ₯Έ μ°¨μμ κΈ°λ°μΌλ‘ λλΉ λλ λμ΄λ₯Ό μλμΌλ‘ κ³μ°ν©λλ€.
ꡬ문:
`aspect-ratio: λλΉ / λμ΄;`
μ¬κΈ°μ `λλΉ`μ `λμ΄`λ μμ(μ μ λλ μμ)μ λλ€.
μ:
16:9 μ’ ν‘λΉλ₯Ό μ μ§νλ €λ©΄ λ€μμ μ¬μ©ν©λλ€.
`aspect-ratio: 16 / 9;`
ν€μλ `auto`λ₯Ό μ¬μ©ν μλ μμ΅λλ€. `auto`λ‘ μ€μ νλ©΄ μμμ λ΄μ¬μ μ’ ν‘λΉ(μ΄λ―Έμ§ λλ λΉλμ€μ κ°μ κ²½μ°)κ° μ¬μ©λ©λλ€. μμμ λ΄μ¬μ μ’ ν‘λΉκ° μμΌλ©΄ μμ±μ΄ μλ¬΄λ° μν₯μ λ―ΈμΉμ§ μμ΅λλ€.
μ:
`aspect-ratio: auto;`
μ€μ©μ μΈ μμ λ° κ΅¬ν
μμ 1: λ°μν μ΄λ―Έμ§
μ΄λ―Έμ§μ μ’ ν‘λΉλ₯Ό μ μ§νλ κ²μ μ곑μ λ°©μ§νλ λ° λ§€μ° μ€μν©λλ€. `aspect-ratio` μμ±μ μ΄ νλ‘μΈμ€λ₯Ό λ¨μνν©λλ€.
HTML:
`
`
CSS:
`img { width: 100%; height: auto; aspect-ratio: auto; /* μ΄λ―Έμ§μ λ΄μ¬μ μ’ ν‘λΉ μ¬μ© */ object-fit: cover; /* μ ν μ¬ν: μ΄λ―Έμ§κ° 컨ν μ΄λλ₯Ό μ±μ°λ λ°©μ μ μ΄ */ }`
μ΄ μμ μμ μ΄λ―Έμ§μ λλΉλ 컨ν μ΄λμ 100%λ‘ μ€μ λκ³ λμ΄λ μ΄λ―Έμ§μ λ΄μ¬μ μ’ ν‘λΉλ₯Ό κΈ°μ€μΌλ‘ μλμΌλ‘ κ³μ°λ©λλ€. `object-fit: cover;`λ μ΄λ―Έμ§κ° μ곑 μμ΄ μ»¨ν μ΄λλ₯Ό μ±μ°λλ‘ λ³΄μ₯νλ©° νμν κ²½μ° μ΄λ―Έμ§λ₯Ό μλΌλΌ μ μμ΅λλ€.
μμ 2: λ°μν λΉλμ€
μ΄λ―Έμ§μ μ μ¬νκ² λΉλμ€λ μ’ ν‘λΉλ₯Ό μ μ§νλ©΄ μ’μ΅λλ€.
HTML:
``
CSS:
`video { width: 100%; height: auto; aspect-ratio: 16 / 9; /* νΉμ μ’ ν‘λΉ μ€μ */ }`
μ¬κΈ°μ λΉλμ€μ λλΉλ 100%λ‘ μ€μ λκ³ λμ΄λ 16:9 μ’ ν‘λΉλ₯Ό μ μ§νκΈ° μν΄ μλμΌλ‘ κ³μ°λ©λλ€.
μμ 3: μ리 νμμ μμ λ§λ€κΈ°
`aspect-ratio` μμ±μ μ¬μ©νμ¬ μ½ν μΈ κ° λ‘λλκΈ° μ μλ νΉμ λͺ¨μμ μ μ§νλ μ리 νμμ μμλ₯Ό λ§λ€ μ μμ΅λλ€. μ΄λ νΉν λ μ΄μμ μ΄λμ λ°©μ§νλ λ° μ μ©ν©λλ€.
HTML:
`
`CSS:
`.placeholder { width: 100%; aspect-ratio: 1 / 1; /* μ μ¬κ°ν μ리 νμμ λ§λ€κΈ° */ background-color: #f0f0f0; }`
μ΄λ κ² νλ©΄ 컨ν μ΄λμ μ 체 λλΉλ₯Ό μ°¨μ§νλ μ μ¬κ°ν μ리 νμμκ° λ§λ€μ΄μ§λλ€. λ°°κ²½μμ μκ°μ νΌλλ°±μ μ 곡ν©λλ€.
μμ 4: CSS Gridμ ν¨κ» aspect-ratio ν΅ν©
aspect-ratio μμ±μ CSS Grid λ μ΄μμ λ΄μμ μ¬μ©ν λ λΉμ λ°νλ©° 그리λ νλͺ©μ λΉμ¨μ λ³΄λ€ ν¨κ³Όμ μΌλ‘ μ μ΄ν μ μμ΅λλ€.
HTML:
`
CSS:
`.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .grid-item { aspect-ratio: 1 / 1; /* λͺ¨λ 그리λ νλͺ©μ΄ μ μ¬κ°νμ΄ λ©λλ€. */ background-color: #ddd; padding: 20px; text-align: center; }`
μ΄ κ²½μ° κ° κ·Έλ¦¬λ νλͺ©μ λ΄λΆ μ½ν μΈ μ κ΄κ³μμ΄ μ μ¬κ°νμ΄ λ©λλ€. grid-template-columnsμ 1fr λ¨μλ 컨ν μ΄λλ₯Ό λλΉ μΈ‘λ©΄μμ λ°μμ μΌλ‘ λ§λλλ€.
μμ 5: CSS Flexboxμ aspect-ratio κ²°ν©
CSS Flexboxμ aspect-ratioλ₯Ό ν¨κ» μ¬μ©νμ¬ μ μ°ν 컨ν μ΄λ λ΄μμ νλ μ€ νλͺ©μ λΉμ¨μ μ μ΄ν μλ μμ΅λλ€.
HTML:
`
CSS:
`.flex-container { display: flex; flex-wrap: wrap; gap: 10px; } .flex-item { width: 200px; /* κ³ μ λλΉ */ aspect-ratio: 4 / 3; /* κ³ μ μ’ ν‘λΉ */ background-color: #ddd; padding: 20px; text-align: center; }`
μ¬κΈ°μ κ° νλ μ€ νλͺ©μ κ³ μ λλΉλ₯Ό κ°μ§λ©° λμ΄λ 4/3 μ’ ν‘λΉλ₯Ό κΈ°μ€μΌλ‘ κ³μ°λ©λλ€.
λΈλΌμ°μ νΈνμ±
`aspect-ratio` μμ±μ Chrome, Firefox, Safari, Edge λ° Operaλ₯Ό ν¬ν¨ν μ΅μ λΈλΌμ°μ μμ λ°μ΄λ λΈλΌμ°μ μ§μμ μ 곡ν©λλ€. κ·Έλ¬λ Can I use...μ κ°μ 리μμ€μμ μ΅μ νΈνμ± λ°μ΄ν°λ₯Ό νμΈνμ¬ λ€μν νλ«νΌ λ° λ²μ μμ μ΅μ μ μ±λ₯μ 보μ₯νλ κ²μ΄ μ’μ΅λλ€.
λͺ¨λ² μ¬λ‘ λ° κ³ λ € μ¬ν
- μ΄λ―Έμ§ λ° λΉλμ€μ `aspect-ratio: auto` μ¬μ©: μ΄λ―Έμ§ λ° λΉλμ€λ‘ μμ ν λ `aspect-ratio: auto`λ₯Ό μ¬μ©νλ©΄ λΈλΌμ°μ κ° μ½ν μΈ μ λ΄μ¬μ μ’ ν‘λΉλ₯Ό νμ©ν μ μμ΅λλ€. μ΄κ²μ΄ μΌλ°μ μΌλ‘ κ°μ₯ μ μ ν μ κ·Ό λ°©μμ λλ€.
- μ리 νμμ μμμ λν μ’ ν‘λΉ μ§μ : λ΄μ¬μ ν¬κΈ°κ° μλ μμ(μ: λΉ `div` μμ)μ κ²½μ° μνλ λΉμ¨μ μ μ§νλ €λ©΄ `aspect-ratio`λ₯Ό λͺ μμ μΌλ‘ μ μν©λλ€.
- `object-fit`κ³Ό κ²°ν©: `object-fit` μμ±μ `aspect-ratio`μ ν¨κ» μλνμ¬ μ½ν μΈ κ° μ»¨ν μ΄λλ₯Ό μ±μ°λ λ°©μμ μ μ΄ν©λλ€. μΌλ°μ μΈ κ°μΌλ‘λ `cover`, `contain`, `fill` λ° `none`μ΄ μμ΅λλ€.
- λ΄μ¬μ ν¬κΈ° μ¬μ μ λ°©μ§: μμμ λ΄μ¬μ ν¬κΈ°λ₯Ό μ¬μ μνλ λ° μ£Όμνμμμ€. `aspect-ratio`μ ν¨κ» `width`μ `height`λ₯Ό λͺ¨λ μ€μ νλ©΄ μκΈ°μΉ μμ κ²°κ³Όκ° λ°μν μ μμ΅λλ€. μΌλ°μ μΌλ‘ λλΉ λλ λμ΄ μ€ νλμ μ°¨μμ μ μνκ³ `aspect-ratio` μμ±μΌλ‘ λ€λ₯Έ μ°¨μμ κ³μ°νλλ‘ νλ κ²μ΄ μ’μ΅λλ€.
- λΈλΌμ°μ λ° μ₯μΉμμ ν μ€νΈ: λ€λ₯Έ CSS μμ±κ³Ό λ§μ°¬κ°μ§λ‘ μΌκ΄λ λμμ 보μ₯νλ €λ©΄ λ€μν λΈλΌμ°μ λ° μ₯μΉμμ ꡬνμ ν μ€νΈνλ κ²μ΄ μ€μν©λλ€.
- μ κ·Όμ±: μ΄λ―Έμ§μ ν¨κ» aspect-ratioλ₯Ό μ¬μ©νλ κ²½μ° `alt` μμ±μ΄ μ΄λ―Έμ§λ₯Ό λ³Ό μ μλ μ¬μ©μλ₯Ό μν μ€λͺ μ μΈ λ체 ν μ€νΈλ₯Ό μ 곡νλμ§ νμΈνμμμ€. μ΄λ μ κ·Όμ±μ λ§€μ° μ€μν©λλ€.
μΌλ°μ μΈ ν¨μ λ° λ¬Έμ ν΄κ²°
- μ€νμΌ μΆ©λ: `aspect-ratio` μμ±μ λ°©ν΄ν μ μλ μΆ©λνλ μ€νμΌμ΄ μλμ§ νμΈνμμμ€. μλ₯Ό λ€μ΄ `width`μ `height`λ₯Ό λͺ¨λ λͺ μμ μΌλ‘ μ€μ νλ©΄ κ³μ°λ ν¬κΈ°κ° μ¬μ μλ μ μμ΅λλ€.
- μλͺ»λ μ’ ν‘λΉ κ°: `aspect-ratio` μμ±μ `width` λ° `height` κ°μ΄ μ ννμ§ λ€μ νμΈνμμμ€. μλͺ»λ κ°μ μ½ν μΈ μ곑μ μ΄λν©λλ€.
- `object-fit` λλ½: `object-fit`μ΄ μμΌλ©΄ μ½ν μΈ κ° μ»¨ν μ΄λλ₯Ό μ¬λ°λ₯΄κ² μ±μ°μ§ λͺ»νμ¬ μκΈ°μΉ μμ κ°κ²©μ΄λ μλ¦Όμ΄ λ°μν μ μμ΅λλ€.
- λ μ΄μμ μ΄λ: `aspect-ratio`λ λ μ΄μμ μ΄λμ λ°©μ§νλ λ° λμμ΄ λμ§λ§ λ‘λ© μ±λ₯μ μ΅μ ννκΈ° μν΄ μ΄λ―Έμ§λ₯Ό 미리 λ‘λνκ±°λ λ€λ₯Έ κΈ°μ μ μ¬μ©νλμ§λ νμΈνμμμ€.
- λλΉ λλ λμ΄ λ―Έμ€μ : aspect-ratio μμ±μ μ¬μ©νλ €λ©΄ λλΉ λλ λμ΄ μ°¨μ μ€ νλλ₯Ό μ§μ ν΄μΌ ν©λλ€. λ λ€ μλμΌλ‘ μ€μ λκ±°λ μ€μ λμ§ μμ κ²½μ° aspect-ratioλ μλ¬΄λ° μν₯μ λ―ΈμΉμ§ μμ΅λλ€.
κ³ κΈ κΈ°μ λ° μ¬μ© μ¬λ‘
컨ν μ΄λ 쿼리 λ° μ’ ν‘λΉ
컨ν μ΄λ 쿼리λ λΉκ΅μ μλ‘μ΄ CSS κΈ°λ₯μΌλ‘ 컨ν μ΄λ μμμ ν¬κΈ°λ₯Ό κΈ°λ°μΌλ‘ μ€νμΌμ μ μ©ν μ μμ΅λλ€. 컨ν μ΄λ 쿼리λ₯Ό `aspect-ratio`μ κ²°ν©νλ©΄ λ°μν λμμΈμμ ν¨μ¬ λ ν° μ μ°μ±μ μ»μ μ μμ΅λλ€.
μ:
`css @container (min-width: 600px) { .container { aspect-ratio: 16 / 9; } } @container (max-width: 599px) { .container { aspect-ratio: 1 / 1; } } `
μ΄ μμ μμλ λλΉλ₯Ό κΈ°μ€μΌλ‘ `.container` μμμ μ’ ν‘λΉλ₯Ό λ³κ²½ν©λλ€.
μ’ ν‘λΉλ‘ λ°μν νμ΄ν¬κ·ΈλνΌ λ§λ€κΈ°
νμ΄ν¬κ·ΈλνΌμ μ§μ μ μΈ κ΄λ ¨μ μμ§λ§ `aspect-ratio`λ₯Ό μ¬μ©νμ¬ νΉν μΉ΄λ λλ κΈ°ν UI κ΅¬μ± μμ λ΄μμ ν μ€νΈ μμ μ£Όμμ μΌκ΄λ μκ°μ κ°κ²©μ λ§λ€ μ μμ΅λλ€.
μνΈ λλ μ μ μν΄ μ’ ν‘λΉ μ¬μ©
`aspect-ratio`μ `object-fit`μ μ§λ₯μ μΌλ‘ κ²°ν©νλ©΄ μ΄λ―Έμ§κ° μ리λ λ°©μμ λ―Έλ¬νκ² μ‘°μ νμ¬ νΉμ μ΄μ μ κ°μ‘°νκ³ λ°μν λμμΈ λ΄μμ μ΄λ μ λμ μνΈ λλ μ μ μ 곡ν μ μμ΅λλ€.
CSSμμ μ’ ν‘λΉμ λ―Έλ
CSSκ° κ³μ λ°μ ν¨μ λ°λΌ `aspect-ratio` μμ±κ³Ό λ€λ₯Έ λ μ΄μμ κΈ°μ κ³Όμ ν΅ν©μ΄ λμ± ν₯μλ κ²μΌλ‘ μμν μ μμ΅λλ€. 컨ν μ΄λ 쿼리μ μ±νμ΄ μ¦κ°νλ©΄ κΈ°λ₯μ΄ λμ± νμ₯λμ΄ λ³΄λ€ μ κ΅νκ³ λ°μμ±μ΄ λ°μ΄λ λμμΈμ΄ κ°λ₯ν΄μ§λλ€.
κ²°λ‘
CSS `aspect-ratio` μμ±μ μ½ν μΈ λΉμ¨μ μ μ§νκ³ λ°μν λ μ΄μμμ λ§λλ λ° μ μ©ν λꡬμ λλ€. ꡬ문, ꡬν λ° λͺ¨λ² μ¬λ‘λ₯Ό μ΄ν΄ν¨μΌλ‘μ¨ μΉμ¬μ΄νΈμ μκ°μ μΌκ΄μ±κ³Ό μ¬μ©μ κ²½νμ ν¬κ² ν₯μμν¬ μ μμ΅λλ€. μ΄ κΈ°μ μ μ¬μ©νμ¬ λ€μν νλ©΄ ν¬κΈ° λ° μ₯μΉμ μννκ² μ μνλ λμμΈμ λ§λμμμ€.