HTMLμ λΈλ‘(block) κ³Ό μΈλΌμΈ(inline)
π HTML μμμ νμ π
HTMLμ λͺ¨λ μμλ ν΄λΉ μμκ° μΉ λΈλΌμ°μ μ μ΄λ»κ² 보μ΄λκ°λ₯Ό κ²°μ μ§λ display μμ±μ κ°μ§λλ€. λλΆλΆμ HTML μμλ μ΄λ¬ν display μμ±κ°μΌλ‘ λ€μ λ κ°μ§ κ° μ€ νλλ₯Ό κ°μ§κ² λ©λλ€.
1. λΈλ(block)μμ
νλμ νκ·Έκ° λΈλΌμ°μ μμ μ’μ°κ³΅κ°μ λ€ μ°¨μ§νλ©΄μ λ 립μ μΈ λ©μ΄λ¦¬ 곡κ°μ κ°μ§λ μμ
2. μΈλΌμΈ(inline) μμ
νλμ νκ·Έκ° λΈλΌμ°μ μμ μ€μ λ‘ μ½λ©λ κ·Έ μμλ§ μ°¨μ§νμ¬ μ’μ°κ° λ€λ₯Έ νκ·Έκ° λλν μμΉν μ μλ μμ
= ν μ€νΈλ 벨 μμ, ν μμ μΌλΆλΆ
3. νΉμ§ λ° μ£Όμμ
λΈλμμλ λ΄λΆμ λΈλμμμ μΈλΌμΈμμλ₯Ό ν¬ν¨ν μ μμ΅λλ€.
μΈλΌμΈμμλ λ΄λΆμ λΈλμμλ₯Ό ν¬ν¨ν μ μμ΅λλ€.
λΈλμμλ€ μ€μμλ μΈλΌμΈμμλ§ ν¬ν¨ν μ μλ κ²λ€μ΄ μμ΅λλ€. : <h1>~<h6>,<p>
μΈλΌμΈμμλ₯Ό cssλ‘ λΈλννμ¬ λ΄λΆμ λΈλμμλ₯Ό ν¬ν¨μν¬ μλ μμ΅λλ€.
λΈλΌμ°μ μ 보μ¬μ§λλ°λ μλ¬΄λ° λ¬Έμ κ° μμ§λ§ μ ν¨μ±μ μ΄κΈλ©λλ€.
π λΈλ‘(block) νμ μ μμπ
display μμ±κ°μ΄ λΈλ‘(block)μΈ μμλ μΈμ λ μλ‘μ΄ λΌμΈ(line)μμ μμνλ©°,
μ’μ° μμͺ½μΌλ‘ μ΅λν λμ΄λ κ°λ₯ν λͺ¨λ λλΉλ₯Ό μ°¨μ§ν©λλ€.
μ¦, λΈλ‘ μμλ λΆλͺ¨ μμμ μ 체 곡κ°μ μ°¨μ§νμ¬ "λΈλ‘"μ λ§λλλ€.
λΈλ‘ μμλ <body> μμ μμμλ§ λνλ μ μμ΅λλ€.
<p>, <div>, <h>, <ul>, <ol>, <li>, <form>, <table>,<h1>~<h6>,<dl>,<dt>,<dd>,<pre>,<blockquote> λ±μ
display μμ±κ°μ΄ λΈλ‘(block)μΈ μμμ λλ€.
π λνμ μΈ λΈλ‘ μμπ
<p>
<p style="border: 3px solid red">
pμμλ display μμ±κ°μ΄ λΈλ‘μΈ μμμ
λλ€.
</p>
See the Pen <p> by Kong Yang (@Kong-Yang) on CodePen.
<div>
<div>μμλ λ€λ₯Έ HTML μμλ€μ νλλ‘ λ¬Άλ λ° μμ£Ό μ¬μ©λλ λνμ μΈ λΈλ‘(block) μμμ λλ€.
<div>μμλ μ£Όλ‘ μ¬λ¬ μμλ€μ μ€νμΌμ ν λ²μ μ μ©νκΈ° μν΄ μ¬μ©λ©λλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Block Inline</title>
</head>
<body>
<div style="background-color:lightgrey; color:green; text-align:center">
<h1>divμμλ₯Ό μ΄μ©ν μ€νμΌ μ μ©</h1>
<p>μ΄λ κ² divμμλ‘ μ¬λ¬ μμλ€μ λ¬Άμ λ€μμ style μμ±κ³Ό ν΄λμ€ λ±μ μ΄μ©νμ¬
ν λ²μ μ€νμΌμ μ μ©ν μ μμ΅λλ€.</p>
</div>
</body>
</html>
See the Pen <div> by Kong Yang (@Kong-Yang) on CodePen.
π‘μΈλΌμΈ μμμμ λΉκ΅π‘
κΈ°λ³Έμ μΌλ‘ λΈλ‘ λ 벨 μμλ μλ‘μ΄ μ€μμ μμνμ§λ§, μΈλΌμΈ μμλ μ€μ μ΄λ κ³³μμλ μμν μ μμ΅λλ€.
π‘'λΈλ‘λΌμΈ νκ·Έ' λ€μ μ’ λ μμΈν μκ³ μΆλ€λ©΄?π‘
π μΈλΌμΈ(inline) νμ μ μμ
display μμ±κ°μ΄ μΈλΌμΈ(inline)μΈ μμλ μλ‘μ΄ λΌμΈ(line)μμ μμνμ§ μμ΅λλ€.
λν, μμμ λλΉλ ν΄λΉ λΌμΈ μ μ²΄κ° μλ ν΄λΉ HTML μμμ λ΄μ©(content)λ§νΌλ§ μ°¨μ§ν©λλ€.
μ¦, μλ‘μ΄ μ€μ λ§λ€μ§ μμΌλ©° νμν λλΉλ§ μ°¨μ§ν©λλ€.
<span>, <a>, <img>, <br>,<em>,<strong>,<input>,<label> λ±μ display μμ±κ°μ΄ μΈλΌμΈ(inline)μΈ μμμ λλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Block Inline</title>
</head>
<body>
<h1>display μμ±κ° : μΈλΌμΈ</h1>
<p><span style="background-color:grey; color:orange">spanμμ</span>λ display μμ±κ°μ΄ μΈλΌμΈμΈ μμμ
λλ€.</p>
</body>
</html>
See the Pen in-line by Kong Yang (@Kong-Yang) on CodePen.
π λνμ μΈ μΈλΌμΈ μμ π
<span>
<span>μμλ ν μ€νΈ(text)μ νΉμ λΆλΆμ λ¬Άλ λ° μμ£Ό μ¬μ©λλ μΈλΌμΈ(inline) μμμ λλ€.
<span>μμλ μ£Όλ‘ ν μ€νΈμ νΉμ λΆλΆμ λ°λ‘ μ€νμΌμ μ μ©νκΈ° μν΄ μ¬μ©λ©λλ€.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>HTML Block Inline</title>
</head>
<body>
<h1>spanμμλ₯Ό μ΄μ©ν μ€νμΌ μ μ©</h1>
<p>μ΄λ κ²
<span style="border: 3px solid red">spanμμλ‘ ν
μ€νΈμ μΌλΆλΆ</span>
λ§μ λ°λ‘ λ¬Άμ νμ μ€νμΌμ μ μ©ν μ μμ΅λλ€.</p>
</body>
</html>
See the Pen <span> by Kong Yang (@Kong-Yang) on CodePen.
π‘λΈλ‘λΌμΈ μμμμ λΉκ΅π‘
κΈ°λ³Έμ μΌλ‘, μΈλΌμΈ μμλ λ¬Έμ νλ¦μμ μ€λ°κΏμ κ°μ νμ§ μμ΅λλ€.
λ°λ©΄ λΈλ‘ μμλ μ€λ°κΏμ μ λ°ν©λλ€. (λ¬Όλ‘ μΈμ λμ²λΌ CSSλ‘ λ°κΏ μ μμ΅λλ€)
π‘'μΈλΌμΈ νκ·Έ' λ€μ μ’ λ μμΈν μκ³ μΆλ€λ©΄?
π μμ λ 벨 λ³κ²½ π
CSS display μμ±μ μ¬μ©ν΄ μμμ μκ°μ νν λ 벨μ λ°κΏ μ μμ΅λλ€.
μ컨λ displayμ κ°μ inlineμμ blockμΌλ‘ λ°κΎΈλ©΄, λΈλΌμ°μ μκ² μ΄ μΈλΌμΈ μμλ₯Ό μΈλΌμΈ λ°μ€ λμ λΈλ‘ λ°μ€λ₯Ό μ¬μ©ν΄ 그리λΌκ³ μ리λ κ²μ λλ€.
κ·Έλ¬λ μ΄ λ°©λ²μ μ¬μ©ν΄λ μμμ μΉ΄ν κ³ λ¦¬μ μ½ν μΈ λͺ¨λΈμ λ°λμ§ μμ΅λλ€.
μ¦ <span> μμμ displayλ₯Ό blockμΌλ‘ μ§μ νλ€ ν΄λ, κ·Έ μμ <div>λ₯Ό λ£μ μλ μμ΅λλ€.
π±μ€λμ μλ μ¬κΈ°π±
π μ°Έκ³ μλ£ π
