CSS μλΈκ·Έλ¦¬λμ κΈ°λ₯, μ΄μ , κ·Έλ¦¬κ³ λ³΅μ‘νκ³ λ°μνμΈ μ€μ²© 그리λ λ μ΄μμμ λ§λ€κΈ° μν μ€μ©μ μΈ μ μ© λ°©λ²μ νꡬνλ μ’ ν© κ°μ΄λμ λλ€. 그리λ νΈλμ μμνκ³ μ λ ¬μ μ μ΄νμ¬ λμμΈ μ μ°μ±μ ν₯μμν€λ λ°©λ²μ λ°°μ°μΈμ.
CSS μλΈκ·Έλ¦¬λ μ λ ¬: μ€μ²© 그리λ λ μ΄μμ μμ λ§μ€ν°νκΈ°
CSS μλΈκ·Έλ¦¬λλ CSS 그리λ λ μ΄μμμ κΈ°λ₯μ νμ₯νλ κ°λ ₯ν κΈ°λ₯μΌλ‘, λ 볡μ‘νκ³ μ μ°ν μ€μ²© 그리λ ꡬ쑰λ₯Ό λ§λ€ μ μκ² ν΄μ€λλ€. μ΄ κΈ°λ₯μ μ¬μ©νλ©΄ 그리λ μμ΄ν μ΄ λΆλͺ¨ 그리λμ νΈλ μ μλ₯Ό μμλ°μ μ€μ²© λ μ΄μμ λ΄μμμ μ λ ¬κ³Ό κ°κ²©μ μ λ‘ μμ΄ μ λ°νκ² μ μ΄ν μ μμ΅λλ€. μ΄ κΈμμλ CSS μλΈκ·Έλ¦¬λμ 볡μ‘ν λ΄μ©λ€μ κΉμ΄ νκ³ λ€μ΄ κ·Έ μ΄μ , μ¬μ© μ¬λ‘, κ·Έλ¦¬κ³ μ½λ μμ λ₯Ό ν΅ν μ€μ ꡬν λ°©λ²μ νꡬν κ²μ λλ€. κΈ°λ³Έ κ°λ λΆν° κ³ κΈ κΈ°μ κΉμ§ λͺ¨λ κ²μ λ€λ£¨μ΄, μ¬λ¬λΆμ΄ μλΈκ·Έλ¦¬λλ₯Ό νμ©νμ¬ μ κ΅νκ³ λ°μνμΈ λμμΈμ λ§λ€ μ μλλ‘ λμλλ¦¬κ² μ΅λλ€.
CSS 그리λ λ μ΄μμ μ΄ν΄νκΈ°: μλΈκ·Έλ¦¬λμ κΈ°μ΄
μλΈκ·Έλ¦¬λμ λν΄ μμ보기 μ μ CSS 그리λ λ μ΄μμμ λν νμ€ν μ΄ν΄κ° νμμ μ λλ€. 그리λ λ μ΄μμμ 컨ν μ΄λλ₯Ό νκ³Ό μ΄λ‘ λλκ³ , κ·Έ κ²°κ³Όλ‘ μκΈ΄ 그리λ μ μμ μμ΄ν μ λ°°μΉν μ μκ² ν΄μ£Όλ 2μ°¨μ λ μ΄μμ μμ€ν μ λλ€. μ΄λ μμμ ν¬κΈ°, μμΉ, μ λ ¬μ μ μ΄νλ κ°λ ₯ν λꡬλ₯Ό μ 곡ν©λλ€.
λ€μμ CSS 그리λ 컨ν μ΄λμ κΈ°λ³Έ μμ μ λλ€:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
}
μ΄ μμ μμλ λμΌν λλΉ(1fr)μ μΈ κ° μ΄κ³Ό μλ λμ΄μ λ κ° νμ κ°μ§ 그리λ 컨ν
μ΄λλ₯Ό λ§λ€μμ΅λλ€. gap μμ±μ 그리λ μμ΄ν
λ€ μ¬μ΄μ κ°κ²©μ μΆκ°ν©λλ€.
CSS μλΈκ·Έλ¦¬λ μκ°: 그리λ κΈ°λ₯ νμ₯νκΈ°
μλΈκ·Έλ¦¬λλ CSS 그리λμ κΈ°λ° μμ ꡬμΆλμ΄, μ€μ²©λ 그리λκ° λΆλͺ¨ 그리λμ νΈλ μ μ(νκ³Ό μ΄)λ₯Ό μμλ°μ μ μκ² ν©λλ€. μ΄λ μ€μ²© 그리λ λ΄μ μμλ€μ μΈλΆ 그리λμ νΈλμ λ§μΆ° μ λ ¬ν μ μμμ μλ―Ένλ©°, μ΄λ₯Ό ν΅ν΄ μΌκ΄μ± μκ³ μκ°μ μΌλ‘ μ‘°νλ‘μ΄ λ μ΄μμμ λ§λ€ μ μμ΅λλ€. μ΄ κΈ°λ₯μ μμλ€μ΄ μ¬λ¬ νμ΄λ μ΄μ κ±Έμ³ μμ΄μΌ νλ 볡μ‘ν λ μ΄μμμ νΉν μ μ©ν©λλ€.
CSS μλΈκ·Έλ¦¬λ μ¬μ©μ μ£Όμ μ΄μ :
- ν₯μλ μ λ ¬: μλΈκ·Έλ¦¬λλ μ€μ²©λ 그리λ μμ΄ν κ³Ό λΆλͺ¨ 그리λμ νΈλ κ°μ μ λ°ν μ λ ¬μ 보μ₯ν©λλ€.
- 볡μ‘μ± κ°μ: λΆλͺ¨ 그리λμμ νΈλ ν¬κΈ°μ μμΉλ₯Ό μ μνκ³ μλΈκ·Έλ¦¬λμμ μ΄λ₯Ό μμλ°κ² ν¨μΌλ‘μ¨ λ³΅μ‘ν λ μ΄μμμ λ¨μνν©λλ€.
- ν₯μλ λ°μμ±: μλΈκ·Έλ¦¬λκ° λΆλͺ¨ 그리λμ ν¬κΈ°μ λͺ¨μμ μ μνλλ‘ νμ¬ λ°μν λμμΈμ μ©μ΄νκ² ν©λλ€.
- μ μ§λ³΄μμ±: λΆλͺ¨ 그리λμ νΈλ μ μλ₯Ό μ€μ μ§μ€ννμ¬ μ½λ μ μ§λ³΄μμ±μ ν₯μμν΅λλ€.
CSS μλΈκ·Έλ¦¬λ ꡬννκΈ°: μ€μ© κ°μ΄λ
μλΈκ·Έλ¦¬λλ₯Ό ꡬννλ €λ©΄, grid-template-columns λ°/λλ grid-template-rows μμ±μ subgridλ‘ μ€μ νμ¬ κ·Έλ¦¬λ μμ΄ν
μ μλΈκ·Έλ¦¬λλ‘ μ μΈν΄μΌ ν©λλ€. μ΄λ λΈλΌμ°μ μκ² λΆλͺ¨ 그리λλ‘λΆν° νΈλ μ μλ₯Ό μμλ°μΌλΌκ³ μ§μνλ κ²μ
λλ€.
μμ : κΈ°λ³Έ μλΈκ·Έλ¦¬λ λ μ΄μμ λ§λ€κΈ°
μΈ κ°μ μ΄κ³Ό λ κ°μ νμ κ°μ§ λ©μΈ 그리λ λ μ΄μμμ΄ μλ μλ리μ€λ₯Ό μκ°ν΄ λ΄ μλ€. μ°λ¦¬λ 그리λ μμ΄ν μ€ νλ μμ λ©μΈ 그리λμ μ΄κ³Ό μ λ ¬λλ μλΈκ·Έλ¦¬λλ₯Ό λ§λ€κ³ μΆμ΅λλ€.
<div class="grid-container">
<div class="grid-item item1">Item 1</div>
<div class="grid-item item2">Item 2</div>
<div class="grid-item item3">Item 3</div>
<div class="grid-item item4">Item 4</div>
<div class="grid-item item5">Item 5
<div class="subgrid-container">
<div class="subgrid-item">Subitem 1</div>
<div class="subgrid-item">Subitem 2</div>
<div class="subgrid-item">Subitem 3</div>
</div>
</div>
<div class="grid-item item6">Item 6</div>
</div>
μ΄μ CSSλ₯Ό μΆκ°ν΄ λ³΄κ² μ΅λλ€:
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 10px;
width: 80%;
margin: 20px auto;
}
.grid-item {
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
}
.item5 {
display: grid; /* Enables grid layout for this item */
}
.subgrid-container {
display: grid;
grid-column: 1 / -1; /* Span all columns of the parent grid item */
grid-template-columns: subgrid;
gap: 5px;
background-color: #e0e0e0;
padding: 10px;
}
.subgrid-item {
background-color: #d0d0d0;
padding: 10px;
border: 1px solid #bbb;
}
μ΄ μμ μμ .subgrid-containerλ .grid-containerλ‘λΆν° μ΄ νΈλμ μμλ°λ μλΈκ·Έλ¦¬λμ
λλ€. .subgrid-containerμ `grid-column: 1 / -1;`μ μ¬μ©νμ¬ .grid-item.item5μ μ 체 λλΉμ κ±ΈμΉλλ‘ ν¨μΌλ‘μ¨ μλΈκ·Έλ¦¬λκ° λΆλͺ¨ 그리λ μ΄κ³Ό μ λ ¬λλλ‘ λ³΄μ₯ν©λλ€. μλΈκ·Έλ¦¬λ μμ΄ν
λ€μ λΆλͺ¨ 그리λμ μ μλ μ΄μ μλμΌλ‘ μ λ ¬λ κ²μ
λλ€.
μ΄λ¦ μλ 그리λ λΌμΈμ μ¬μ©ν λͺ μμ νΈλ ν¬κΈ° μ§μ
λ 볡μ‘ν λ μ΄μμμ κ²½μ°, νΈλ ν¬κΈ°λ₯Ό λͺ μμ μΌλ‘ μ μνκ³ μ΄λ¦ μλ 그리λ λΌμΈμ μ¬μ©νκ³ μΆμ μ μμ΅λλ€. μ΄λ μ½λμ μ μ΄λ ₯κ³Ό λͺ νμ±μ λμ¬μ€λλ€.
.grid-container {
display: grid;
grid-template-columns: [col-start] 1fr [col-mid] 2fr [col-end];
grid-template-rows: [row-start] auto [row-mid] auto [row-end];
gap: 10px;
}
.subgrid-container {
display: grid;
grid-column: 1 / -1; /* Span all columns of the parent grid item */
grid-template-columns: subgrid [col-start] [col-mid] [col-end];
grid-template-rows: subgrid;
gap: 5px;
background-color: #e0e0e0;
padding: 10px;
}
μ¬κΈ°μλ λΆλͺ¨ 그리λμ μ΄λ¦ μλ 그리λ λΌμΈ(col-start, col-mid, col-end, row-start, row-mid, row-end)μ μ μνμ΅λλ€. μλΈκ·Έλ¦¬λλ μ΄λ¬ν μ΄λ¦ μλ λΌμΈλ€μ μμλ°μ, μ΄ μ΄λ¦λ€μ μ¬μ©νμ¬ μλΈκ·Έλ¦¬λ λ΄μ μμλ₯Ό λ°°μΉν μ μκ² ν΄μ€λλ€.
κ³ κΈ μλΈκ·Έλ¦¬λ κΈ°μ
μλΈκ·Έλ¦¬λμμ νΈλ νμ₯νκΈ°
μΌλ° 그리λμμμ λ§μ°¬κ°μ§λ‘ μλΈκ·Έλ¦¬λμμλ νΈλμ νμ₯ν μ μμ΅λλ€. μ΄λ₯Ό ν΅ν΄ μλΈκ·Έλ¦¬λ λ΄μμ μ¬λ¬ νμ΄λ μ΄μ μ°¨μ§νλ μμλ₯Ό λ§λ€ μ μμ΅λλ€.
.subgrid-item-span {
grid-column: 1 / span 2;
grid-row: 1 / span 2;
}
μ΄λ κ² νλ©΄ ν΄λΉ μμκ° μλΈκ·Έλ¦¬λ λ΄μμ λ κ°μ μ΄κ³Ό λ κ°μ νμ κ±Έμ³ νμ₯λ©λλ€.
μλΈκ·Έλ¦¬λμ ν¨κ» grid-auto-flow μ¬μ©νκΈ°
grid-auto-flow μμ±μ μλ λ°°μΉλ μμ΄ν
μ΄ κ·Έλ¦¬λμ μ½μ
λλ λ°©μμ μ μ΄ν©λλ€. μ΄ μμ±μ μλΈκ·Έλ¦¬λμ ν¨κ» μ¬μ©νμ¬ μμ΄ν
μ΄ λ°°μΉλλ λ°©ν₯μ μ μ΄ν μ μμ΅λλ€.
.subgrid-container {
display: grid;
grid-template-columns: subgrid;
grid-auto-flow: row dense; /* Example value */
}
row dense κ°μ μμ΄ν
λ€μ΄ νμ λΉ κ³΅κ°μ μ±μ°κ² νκ³ , column dense κ°μ μ΄μ λΉ κ³΅κ°μ μ±μ°κ² ν©λλ€.
μλΈκ·Έλ¦¬λμμ μμμ νΈλ μ²λ¦¬νκΈ°
μλΈκ·Έλ¦¬λ μμ΄ν
μ΄ λͺ
μμ μΌλ‘ μ μλ νΈλ μΈλΆμ λ°°μΉλλ©΄ μμμ νΈλμ΄ μμ±λ©λλ€. grid-auto-rowsμ grid-auto-columns μμ±μ μ¬μ©νμ¬ μ΄λ¬ν μμμ νΈλμ ν¬κΈ°λ₯Ό μ μ΄ν μ μμ΅λλ€.
.subgrid-container {
display: grid;
grid-template-columns: subgrid;
grid-auto-rows: minmax(100px, auto);
}
μ΄λ κ² νλ©΄ μμμ μΌλ‘ μμ±λ λͺ¨λ νμ΄ μ΅μ 100pxμ λμ΄λ₯Ό κ°μ§λ©° μ½ν μΈ ν¬κΈ°μ λ°λΌ μλμΌλ‘ μ‘°μ λλλ‘ λ³΄μ₯ν©λλ€.
CSS μλΈκ·Έλ¦¬λμ μ€μ μ¬μ© μ¬λ‘
CSS μλΈκ·Έλ¦¬λλ λ€μν μ€μ μλ리μ€μμ 볡μ‘ν λ μ΄μμμ λ§λλ λ° νΉν μ μ©ν©λλ€:
- νΌ λ μ΄μμ: νΌ λ μ΄λΈκ³Ό μ λ ₯ νλλ₯Ό μΌκ΄λ 그리λ κ΅¬μ‘°λ‘ μ λ ¬ν©λλ€. λ μ΄λΈ κΈΈμ΄κ° λ€μν λ€κ΅μ΄ νΌμ μμν΄ λ³΄μΈμ. μλΈκ·Έλ¦¬λλ λ μ΄λΈ κΈΈμ΄μ μκ΄μμ΄ μ λ ₯ νλκ° νμ μ λ ¬λλλ‘ λ³΄μ₯ν μ μμ΅λλ€.
- μν λͺ©λ‘: μ΄λ―Έμ§, μ λͺ©, μ€λͺ μ΄ μΌκ΄λκ² μ λ ¬λ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ μν λͺ©λ‘μ λ§λλλ€. μ¬λ¬ κ΅κ°μ μνμ νλ§€νλ μ μμκ±°λ νλ«νΌμ μκ°ν΄ 보μΈμ. μλΈκ·Έλ¦¬λλ μνλͺ κΈΈμ΄λ μ€λͺ μ μ°¨μ΄μλ λΆκ΅¬νκ³ μν μΈλΆ μ 보μ μΌκ΄λ μ λ ¬μ μ μ§νλ λ° λμμ΄ λ μ μμ΅λλ€.
- λμ보λ μΈν°νμ΄μ€: μλ‘ μ λ ¬λμ΄μΌ νλ μ¬λ¬ ν¨λκ³Ό μμ ―μΌλ‘ ꡬμ±λ 볡μ‘ν λμ보λ μΈν°νμ΄μ€λ₯Ό ꡬμΆν©λλ€. μ°¨νΈ, ν, μ£Όμ μ±κ³Ό μ§νλ₯Ό νμνλ κΈμ΅ λμ보λλ₯Ό μκ°ν΄ 보μΈμ. μλΈκ·Έλ¦¬λλ λͺ¨λ μμκ° μλ²½νκ² μ λ ¬λλλ‘ λ³΄μ₯νμ¬ μ λ¬Έμ μ΄κ³ μ¬μ©μ μΉνμ μΈ κ²½νμ μ 곡ν©λλ€.
- λ§€κ±°μ§ λ μ΄μμ: μ¬λ¬ μ΄μ κ±Έμ³ μ λ ¬λμ΄μΌ νλ κΈ°μ¬, μ΄λ―Έμ§, μΊ‘μ μ΄ μλ λ§€κ±°μ§ μ€νμΌ λ μ΄μμμ λμμΈν©λλ€. μλ₯Ό λ€μ΄, λ΄μ€ μΉμ¬μ΄νΈλ μλΈκ·Έλ¦¬λλ₯Ό μ¬μ©νμ¬ μ½ν μΈ μ νμ κ΄κ³μμ΄ ννμ΄μ§μ μ¬λ¬ μΉμ μ κ±Έμ³ μΌκ΄λ 그리λ ꡬ쑰λ₯Ό μ μ§ν μ μμ΅λλ€.
- μΊλ¦°λ λ·°: μ΄λ²€νΈκ° νΉμ λ μ§ λ° μκ°κ³Ό μ λ ¬λμ΄μΌ νλ μΊλ¦°λ λ·°λ₯Ό ꡬνν©λλ€.
CSS μλΈκ·Έλ¦¬λ λΈλΌμ°μ μ§μ
CSS μλΈκ·Έλ¦¬λμ λΈλΌμ°μ μ§μμ μ΅μ λΈλΌμ°μ μ λ°μ κ±Έμ³ λμ²΄λ‘ μνΈν©λλ€. Firefox, Chrome, Safari, Edgeμμ μ§μλ©λλ€. νμ§λ§ λμ κ³ κ°μ λν μ§μμ 보μ₯νκΈ° μν΄ Can I useμ κ°μ μΉμ¬μ΄νΈμμ μ΅μ λΈλΌμ°μ νΈνμ± νλ₯Ό νμ νμΈνλ κ²μ΄ μ’μ΅λλ€. λν ꡬν λΈλΌμ°μ λ₯Ό μν λ체 λ°©μμ μ 곡νκΈ° μν΄ μ μ§μ ν₯μ κΈ°λ²μ μ¬μ©νλ κ²μ κ³ λ €ν μλ μμ΅λλ€.
μ κ·Όμ± κ³ λ €μ¬ν
CSS μλΈκ·Έλ¦¬λλ₯Ό μ¬μ©ν λλ μ κ·Όμ±μ κ³ λ €νλ κ²μ΄ μ€μν©λλ€. μ₯μ κ° μλ μ¬μ©μκ° λ μ΄μμμ λ Όλ¦¬μ μΌλ‘ νμν μ μλλ‘ λ³΄μ₯ν΄μΌ ν©λλ€. μλ§¨ν± HTML μμλ₯Ό μ¬μ©νκ³ μ μ ν ARIA μμ±μ μ 곡νμ¬ μ κ·Όμ±μ ν₯μμν€μΈμ. μ€ν¬λ¦° 리λμ ν€λ³΄λ νμμΌλ‘ λ μ΄μμμ ν μ€νΈνμ¬ μ μ¬μ μΈ λ¬Έμ λ₯Ό μλ³νκ³ ν΄κ²°ν΄μΌ ν©λλ€. HTML μμ€μμ μ½ν μΈ κ° μ¬λ°λ₯΄κ² μ λ ¬λλ κ²μ μ€ν¬λ¦° 리λ μ¬μ©μμκ² λ§€μ° μ€μν©λλ€. μ 보 μ λ¬μ μν΄ μκ°μ λ μ΄μμμλ§ μμ‘΄ν΄μλ μ λ©λλ€.
CSS μλΈκ·Έλ¦¬λ vs. μ ν΅μ μΈ λ μ΄μμ κΈ°λ²
floatλ flexboxμ κ°μ μ ν΅μ μΈ λ μ΄μμ κΈ°λ²κ³Ό λΉκ΅ν λ, CSS μλΈκ·Έλ¦¬λλ λͺ κ°μ§ μ΄μ μ μ 곡ν©λλ€:
- 2μ°¨μ λ μ΄μμ: μλΈκ·Έλ¦¬λλ 2μ°¨μ λ μ΄μμμ μν΄ μ€κ³λ λ°λ©΄, flexboxλ μ£Όλ‘ 1μ°¨μ λ μ΄μμμ μν κ²μ λλ€.
- μ λ ¬ μ μ΄: μλΈκ·Έλ¦¬λλ μ€μ²©λ 그리λ μμ΄ν κ³Ό λΆλͺ¨ 그리λμ νΈλ κ°μ μ λ ¬μ λν΄ λ μ λ°ν μ μ΄λ₯Ό μ 곡ν©λλ€.
- 볡μ‘μ± κ°μ: μλΈκ·Έλ¦¬λλ λΆλͺ¨ 그리λμμ νΈλ ν¬κΈ°μ μμΉλ₯Ό μ μνκ³ μλΈκ·Έλ¦¬λμμ μ΄λ₯Ό μμλ°κ² ν¨μΌλ‘μ¨ λ³΅μ‘ν λ μ΄μμμ λ¨μνν μ μμ΅λλ€.
flexboxλ λ¨μΌ νμ΄λ μ΄μ μμ΄ν μ λ°°μ΄νλ λ° νμνμ§λ§, μλΈκ·Έλ¦¬λλ μ λ°ν μ λ ¬μ΄ νμν 볡μ‘ν 2μ°¨μ λ μ΄μμμ λ§λλ λ° λ°μ΄λ©λλ€.
CSS μλΈκ·Έλ¦¬λ μ¬μ©μ μν νκ³Ό λͺ¨λ² μ¬λ‘
- λͺ νν κ³νμΌλ‘ μμνμΈμ: μλΈκ·Έλ¦¬λλ₯Ό ꡬννκΈ° μ μ λ μ΄μμμ μ μ€νκ² κ³ννκ³ μλΈκ·Έλ¦¬λκ° κ°μ₯ ν° μ΄μ μ μ 곡ν μ μλ μμμ νμ νμΈμ.
- μ΄λ¦ μλ 그리λ λΌμΈμ μ¬μ©νμΈμ: μ΄λ¦ μλ 그리λ λΌμΈμ μ½λμ κ°λ μ±κ³Ό μ μ§λ³΄μμ±μ ν₯μμν¬ μ μμ΅λλ€.
- μ² μ νκ² ν μ€νΈνμΈμ: νΈνμ±κ³Ό λ°μμ±μ 보μ₯νκΈ° μν΄ λ€μν λΈλΌμ°μ μ μ₯μΉμμ λ μ΄μμμ ν μ€νΈνμΈμ.
- μ κ·Όμ±μ κ³ λ €νμΈμ: μ₯μ κ° μλ μ¬μ©μλ λ μ΄μμμ μ κ·Όν μ μλλ‘ λ³΄μ₯νμΈμ.
- μλ―Έ μλ ν΄λμ€ μ΄λ¦μ μ¬μ©νμΈμ: μ½λ κ°λ μ±κ³Ό μ μ§λ³΄μμ±μ λμ΄κΈ° μν΄ λͺ ννκ³ μμ μ μΈ ν΄λμ€ μ΄λ¦μ μ¬μ©νμΈμ. μλ₯Ό λ€μ΄, `item1`μ΄λ `container` κ°μ μΌλ°μ μΈ μ΄λ¦ λμ , `product-image`λ `navigation-menu`μ²λΌ μμμ μ½ν μΈ λ κΈ°λ₯μ λ°μνλ μ΄λ¦μ μ ννμΈμ. μ΄λ κ² νλ©΄ κ° μμμ λͺ©μ μ μ΄ν΄νκ³ λμ€μ μ½λλ₯Ό μμ νκΈ°κ° λ μ¬μμ§λλ€.
- μ½λλ₯Ό λ¬ΈμννμΈμ: CSSμ HTMLμ μ£Όμμ μΆκ°νμ¬ μ¬λ¬ μΉμ μ λͺ©μ κ³Ό μλ λ°©μμ μ€λͺ νμΈμ. μ΄λ νλμ μ΄ν΄νκΈ° μ΄λ €μΈ μ μλ 볡μ‘ν λ μ΄μμμ νΉν λμμ΄ λ©λλ€. μ λ¬Έμνλ μ½λλ λ€λ₯Έ κ°λ°μ(λλ λ―Έλμ μμ )κ° λ μ΄μμμ μ μ§νκ³ μμ νκΈ° μ½κ² λ§λλλ€.
CSS μλΈκ·Έλ¦¬λ λ μ΄μμ λλ²κΉ νκΈ°
CSS μλΈκ·Έλ¦¬λ λ μ΄μμμ λλ²κΉ νλ κ²μ λλλ‘ μ΄λ €μΈ μ μμ΅λλ€. λ€μμ μΌλ°μ μΈ λ¬Έμ λ₯Ό ν΄κ²°νλ λ° λμμ΄ λλ λͺ κ°μ§ νμ λλ€:
- λΈλΌμ°μ κ°λ°μ λꡬλ₯Ό μ¬μ©νμΈμ: λΈλΌμ°μ κ°λ°μ λꡬλ CSS 그리λ λ° μλΈκ·Έλ¦¬λ λ μ΄μμμ κ²μ¬νλ κ°λ ₯ν κΈ°λ₯μ μ 곡ν©λλ€. 그리λ λΌμΈ, νΈλ ν¬κΈ°, μμ΄ν μμΉλ₯Ό μκ°νν μ μμ΅λλ€.
- μ½μμμ μ€λ₯λ₯Ό νμΈνμΈμ: λΈλΌμ°μ μ½μμμ CSS μ€λ₯λ κ²½κ³ κ° μλμ§ μ°Ύμ보μΈμ.
- λ μ΄μμμ λ¨μννμΈμ: 볡μ‘ν λ μ΄μμμ λ¬Έμ κ° μλ€λ©΄, λ¬Έμ μμμ λΆλ¦¬νκΈ° μν΄ λ μ΄μμμ λ¨μνν΄ λ³΄μΈμ.
- CSSλ₯Ό κ²μ¦νμΈμ: CSS μ ν¨μ± κ²μ¬κΈ°λ₯Ό μ¬μ©νμ¬ κ΅¬λ¬Έ μ€λ₯ λ° κΈ°ν λ¬Έμ λ₯Ό νμΈνμΈμ.
- κ³μ°λ μ€νμΌμ κ²μ¬νμΈμ: λΈλΌμ°μ κ°λ°μ λꡬμ "Computed" νμ μ¬μ©νμ¬ μμλ μ€νμΌμ ν¬ν¨νμ¬ κ° μμμ μ μ©λ μ΅μ’ κ³μ°λ μ€νμΌμ κ²μ¬νμΈμ.
κ²°λ‘ : CSS μλΈκ·Έλ¦¬λμ νμ λ°μλ€μ΄κΈ°
CSS μλΈκ·Έλ¦¬λλ 볡μ‘νκ³ λ°μνμΈ μ€μ²© 그리λ λ μ΄μμμ λ§λλ λ° μ μ©ν λꡬμ λλ€. κ·Έ κΈ°λ₯κ³Ό μ΄μ μ μ΄ν΄ν¨μΌλ‘μ¨, μλΈκ·Έλ¦¬λλ₯Ό νμ©νμ¬ μΉ λμμΈ κΈ°μ μ ν₯μμν€κ³ λ μ κ΅νκ³ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ μΉμ¬μ΄νΈλ₯Ό ꡬμΆν μ μμ΅λλ€. νΌ λ μ΄μμ, μν λͺ©λ‘, λλ λμ보λ μΈν°νμ΄μ€λ₯Ό λμμΈνλ , μλΈκ·Έλ¦¬λλ ν½μ λ¨μκΉμ§ μλ²½ν λ μ΄μμμ λ§λλ λ° νμν μ μ°μ±κ³Ό μ μ΄λ ₯μ μ 곡ν©λλ€. λΈλΌμ°μ μ§μμ΄ κ³μ κ°μ λ¨μ λ°λΌ, μλΈκ·Έλ¦¬λλ λͺ¨λ νλ‘ νΈμλ κ°λ°μμ ν΄ν·μμ νμμ μΈ λΆλΆμ΄ λ κ²μ λλ€.
μ΄ κΈμμ μ 곡λ μμ λ€μ μ€νν΄λ³΄κ³ CSS μλΈκ·Έλ¦¬λμ λ€μν κΈ°λ₯λ€μ νμν΄ λ³΄μΈμ. μ°μ΅μ ν΅ν΄ μλΈκ·Έλ¦¬λλ₯Ό λ§μ€ν°νκ³ κΈ°λ₯μ μ΄λ©΄μλ μκ°μ μΌλ‘ λ§€λ ₯μ μΈ λ©μ§ μΉ λ μ΄μμμ λ§λ€ μ μκ² λ κ²μ λλ€. CSS 그리λμ μλΈκ·Έλ¦¬λλ₯Ό νμ©νλ μ€νμμ€ νλ‘μ νΈμ κΈ°μ¬νμ¬ κΈ°μ μ λν κΈ°μ κ³Ό μ΄ν΄λ₯Ό λμ± ν₯μμν€λ κ²μ κ³ λ €ν΄ λ³΄μΈμ.