Tips
margin κ³Ό padding μ μ°¨μ΄
margin
border μ λ°κΉ₯μͺ½μ μμμ μ°¨μ§νλ€.
μ£Όλ³ μμμμ μ¬λ°±(거리)λ₯Ό λκΈ° μν μμμ΄λ€.
μμ κ°μ΄ νμ©λλ€.
auto κ°μ΄ νμ©λλ€.
padding
object λ΄μ λ΄λΆ μ¬λ°±μ΄λ€.
content μ border μ¬μ΄μ μ¬λ°±μ λνλ΄λ μμμ΄λ€.
padding λ content μ μμμ΄λΌκ³ λ³Ό μ μλ€.
μμμ auto κ°μ΄ νμ©λμ§ μλλ€.
display - block, inline, inline-block
block
μλ‘λ‘ λμ΄λλ©°, κΈ°λ³Έμ μΌλ‘ width μ λ¨μ μ¬λ°±μ μ λΆ μ°¨μ§νλ€.
λ°λΌμ, width 100% λ₯Ό μ§μ ν νμκ° μλ€.
inline
μμΌλ‘ λμ΄λλ©°, ν¬κΈ° μ‘°μ μ ν μ μλ€. ν¬κΈ°λ content μ λ§κ² μλμΌλ‘ μ μ©λλ€.
inline-block
μμΌλ‘ λμ΄λλ©°, ν¬κΈ° μ‘°μ μ΄ κ°λ₯νλ€.
rem, em μ°¨μ΄?
μΌλ¨ κΈ°λ³Έμ μΌλ‘ μ¬μ΄μ¦λ₯Ό μ‘λλ°μ μ λ κ°μΌλ‘ μ¬μ΄μ¦λ₯Ό μ‘μ λλ px λ¨μλ₯Ό μ¬μ©νλ€. κ·Έμ λ°νμ¬, μλμ μΌλ‘ μ¬μ΄μ¦λ₯Ό μ‘μ λλ %, v*(view port), em, rem μ μ¬μ©νλ€.
λΆλͺ¨μμμ λ°λΌμ μ¬μ΄μ¦κ° λ³κ²½μ΄ λμΌ νλ€λ©΄ %, em
λΆλͺ¨μμμ μκ΄μμ΄ λΈλΌμ°μ μ¬μ΄μ¦μ λ°λΌμ μ¬μ΄μ¦λ₯Ό μ‘μΌλ €λ©΄ v*, rem
μμμ λλΉμ λμ΄μ λ°λΌμ μ¬μ΄μ¦κ° λ³κ²½μ΄ λμΌ νλ€λ©΄ %, v* λ₯Ό μ¬μ©νλ€.
ν°νΈμ ν¬κΈ°μ λ°λΌμ μ¬μ΄μ¦κ° λ³κ²½λμΌ νλ€λ©΄ v* λλ rem μ μ΄λ€.
em μ μ
em μ λΆλͺ¨μμμ μν₯μ λ°μ μ λμ μΈ κ°μ κ°λλ€.
μ²«λ² μ§Έ div: 1em μ΄κΈ° λλ¬Έμ, 16px
λλ² μ§Έ div: λΆλͺ¨μμ 16px μ 2λ°°μ΄κΈ° λλ¬Έμ 32px
μΈλ² μ§Έ div: λΆλͺ¨μμ 32px μ 3λ°°μ΄κΈ° λλ¬Έμ 96px
rem μ μ
rem μ λΆλͺ¨μμμ μν₯μ λ°μ§ μκ³ κ³ μ κ°μ κ°λλ€.
μ²«λ² μ§Έ div: λΆλͺ¨μμμ μκ΄μμ΄ 1rem(16px)
λλ² μ§Έ div: λΆλͺ¨μμμ μκ΄μμ΄ 2rem(32px)
μΈλ² μ§Έ div: λΆλͺ¨μμμ μκ΄μμ΄ 3rem(48px)
κ²°λ‘
em μ κ°κΈμ μ΄λ©΄ μ¬μ©μ μ§μνλ, κΌ νμν κ²½μ°μλ§ μ¬μ©νμ.
λΈλΌμ°μ μ¬μ΄μ¦κ° λ³κ²½λ¨μ λ°λΌ padding μ΄λ margin κ°μ΄ λ³ν΄μΌ νλ κ²½μ°, em λλ rem μ μ¨μΌ νλ€.
Last updated