μ€λμ CSSλ₯Ό μ¬μ©νλ©΄μ λ§μ΄ ν·κ°λ¦¬κΈ°λ
position
,inline
,block
,inline-block
λ±μ μμλ³Όλ €κ³ ν©λλ€.
Position
μμ±μ νλ©΄μμμ μ리λ©νΈ(μμ)μ μμΉλ₯Ό μ΄λλ€ μ€μ§ κ²°μ ν μ μλλ‘ ν΄μ£Όλ μμ±μ
λλ€.
μ¦ ν¬μ§μ
λμ ν λ°©λ²μ μ§μ ν΄μ£Όλ μμ±!
ν¬μ§μ
μμ±μλtatic
, relative
, absolute
, fixed
λ±μ΄ μλλ° μ΄λ° μμ±λ€μ λΆμ¬ν΄μ€μΌ λΆμμ μΌλ‘ top
, bottom
, left
, right
λ₯ μμΉ κ°λ€μ μ¬μ©ν μ μλ€κ³ ν©λλ€.
βοΈ static
static
μμ±μ κ΅³μ΄ μ
λ ₯μ νμ§ μμλ κΈ°λ³Έμ μΌλ‘ μ μ©μ΄ λμ΄μλ μμ±μ
λλ€.
π‘ μμμ ν¬μ§μ
μμ±μ μ¬μ©νλ©΄ top
κ°μ μμΉ κ°μ μΈμ μλ€κ³ νλλ° μμΈλ‘static
μμ±μ top
, bottom
, right
, left
μν₯μ λ°μ§ μμ΅λλ€.
relative
μμ±μ κΈ°λ³Έμ μΈ ν¬μ§μ
μμ μλμ μΈ ν¬μ§μ
μ κ°μ§ μ μλλ‘ ν΄μ€λλ€.
μμμ μκΈ° νλ μμΉ κ°μΈ μ΄μ©ν΄ μλμ μμΉμμ μλμ μΈ μμΉλ₯Ό μ§μ ν΄ μ€μ μμ΅λλ€.
absolute
μμ±μ κ°μ₯ κ°κΉμ΄ ν¬μ§μ
μ‘°μ μ리먼νΈμ μλμ μΈ μμΉλ₯Ό μ€μ ν μ μμ΅λλ€.
κ°κΉμ΄ μ‘°μ μ리먼νΈκ° μλ€λ©΄ body
λ₯Ό κΈ°μ€μΌλ‘ ν©λλ€.
fixed
μμ±μ νλ©΄μ 보μ΄λ μμΉμ κ³ μ νλ€κ³ μκ°νλ©΄ νΈν©λλ€.
μμΉκ° νλ² κ³ μ λλ©΄ μ€ν¬λ‘€μ λ΄λ €λ κ·Έμ리μ κ³ μ μ μΌλ‘ μμΉνκ² λ©λλ€!
μ΄λ°μμΌλ‘ μλ¨λ°μ μ μ©μ λ§μ΄ νκ²λ©λλ€.
display
μμ±μ μΉνμ΄μ§ μμμ μ리먼νΈλ€μ΄ μ΄λ»κ² 보μ¬μ§κ³ λ€λ₯Έ μ리λ©νΈμ μ΄λ»κ² μνΈ λ°°μΉλλμ§λ₯Ό κ²°μ νλ μμ±μ
λλ€. μμ±κ°μ inline
, block
, inline-block
λ±μ΄ μμ΅λλ€.
inline
μμλ μ€λ°κΏ μμ΄ νμ€μ λ€λ₯Έ μμλ€κ³Ό λλν λ°°μΉλ©λλ€.
inline
μμλ‘λ span
, a
, em
νκ·Έ λ±μ΄ μμ΅λλ€.
<body> <span>span</span> <a>abcdef</a> </body> </html>
body { width: 300px; height: 300px: margin: 100px; padding: 100px; } span { background-color: yellow; } a { background-color: green; }
inline
μμλ width
, height
μμ±μ μ§μ ν΄λ μ μ©μ΄ λμ§ μλλ€.
blick
μΌλ‘ μ§μ λ μμλ μ€λ°κΏμ΄ λ€μ΄κ° νμ€μ μ°¨μ§ ,λ€λ₯Έ μμκ° μμ΄λ λ€λ₯Έμ€λ‘ λ°μ΄λ΄κ³ νΌμ νμ€μ μ°¨μ§ν©λλ€.
block
μμλ‘λ div
, p
, h1
νκ·Έ λ±μ΄ μμ΅λλ€.
<body> <div>div</sdiv> <p>p</p> </body>
div { background-color: yellow; } p { background-color: green; }
π‘ inline
μμμλ λ¬λ¦¬ width
, height
, margin
, padding
μμ±μ΄ λͺ¨λ μ μ© λ©λλ€.
inline-block
μμλ inline
μμμ²λΌ μ€λ°κΏ μμ΄ νμ€μ λ€λ₯Έ μμλ€κ³Ό λλν λ°°μΉκ° λκ³
inline
μμμλ λ¬λ¦¬ width
, height
, margin
, padding
μμ±μ΄ λͺ¨λ μ μ© λ©λλ€.
inline-block
μμλ‘λ button
, input
, select
νκ·Έ λ±μ΄ μμ΅λλ€.