λͺ©μ°¨
μ λ²μ λ€λ€λ κ²μ μ΄μ΄μ ν¬μ§μ μ λν΄μ λ μμ보μλ€.
κ°λ¨νκ² λ³΅μ΅νλ©΄
HTMLμμμ μ’ν κΈ°μ€μ νμ μΌμͺ½ μλ¨μ κΌμ§μ μ΄ κΈ°μ€μ΄λ€.
κ·Έλμ top, bottom, left, rightμ κ°μ λ£μ΄ μ£Όλ©΄
κ·Έ κΈ°μ€μ΄ ν΄λΉ κ°μ λ°°μΉκ° λλ€.
(top: 50%, left: 50% - μΌμͺ½ μλ¨ κΌμ§μ μ΄ κ·Έ μ’νμ λ°°μΉ)
ν¬μ§μ μ μ ν΄μ€ λ κ°μ px λ±μ μ λμ μΈ κ°κ³Ό %λ±μ μλμ μΈ κ°μ λ£μ΄ μ€ μ μλλ°
μ΄λ μμ μ λ§μ λ§μΆ°μ λ£μ΄μ£Όλ©΄ λλ€.
μλ₯Ό λ€μ΄μ 'λλ μ΄κ²μ λΆλͺ¨μμμ μ κ°μ΄λ°μ νμ μμΉμν€κ² μ΄!'
λΌλ μλλ‘ κ°μ λ£λλ€λ©΄, λΆλͺ¨μμμ ν¬κΈ°μ λ°λΌμ ν΄λΉ μμκ° λ°λλ©΄ μλλ€.
μ΄λ¬ν κ²½μ° % μ κ°μ μλμ μΈ κ°μ μ¬μ©νλ©΄ μ΄λ€ μν©μλ
μλν μμΉμ λ°°μΉλ₯Ό ν μ μμ κ²μ΄λ€!
μμ
μ λ²μ λ€λ£¨μλ 'μ κ°μ΄λ° λ°°μΉ'μ μ΄μ΄μ
λΆλͺ¨μμμ λ°κΉ₯λΆλΆμ λ± λ§μΆ°μ λ°°μΉνλ κ²μ ν΄λ³΄μλ€.
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
width: 500px;
height: 500px;
border: 1px solid #000;
}
.child {
position: absolute;
background-color: steelblue;
width: 100px;
height: 100px;
left: 0;
top:100%
}
μμλ₯Ό λΆλͺ¨μμμ μΌμͺ½ νλ¨ λΆλΆμ λ± λ§μΆ°μ λ°°μΉλ₯Ό νκΈ° μν΄μ
top: 100%λ₯Ό λ£μ΄μ£Όμλ€.
μ¦, λΆλͺ¨μμμ λμ΄κ°μ νμ λ£μ΄μ£Όλ κ²μ΄λ€.
λ°λΌμ λΆλͺ¨μμμ heightκ° λ°λμ΄λ μΌμͺ½ νλ¨μ λΆμ΄μκ² ν μ μλ€.
μλμ κ°μ΄ λ€μνκ² λ°°μΉν μ μλ€.
'π | WEB DEV > HTML CSS' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
CSS κ°μν΄λμ€ (1)-2_λ§μ°μ€ μ€λ² ν¨κ³Ό(hover, transition) μΆκ°! (0) | 2022.01.07 |
---|---|
CSS κ°μν΄λμ€ (1)_λ§μ°μ€ μ€λ² ν¨κ³Ό(hover, transition) (0) | 2022.01.07 |
CSS ν¬μ§μ (2)_μλμΌλ‘ μ κ°μ΄λ° λ°°μΉ? (0) | 2022.01.06 |
CSS ν¬μ§μ (1)_λΆλͺ¨μμ μμμμ (0) | 2022.01.05 |
HTML μλ©ν± νκ·Έ (λ μ΄μμ μ€κ³) (0) | 2022.01.05 |
λκΈ