λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
HTML

[HTML] 블둝 레벨 μš”μ†Œμ™€ 인라인 μš”μ†Œ μ•Œμ•„λ³΄κΈ°

by 코딩곡책 2022. 8. 20.
λ°˜μ‘ν˜•

블둝 레벨 μš”μ†Œμ™€ 인라인 μš”μ†Œ

μš”μ†Œμ˜ μœ ν˜•μ€ '블둝 레벨 μš”μ†Œ'와 '인라인 μš”μ†Œ'둜 λ‚˜λˆ„μ–΄μ§‘λ‹ˆλ‹€. 이 두 가지 μš”μ†Œμ— λŒ€ν•΄ μžμ„Ένžˆ μ„€λͺ…ν•˜κ² μŠ΅λ‹ˆλ‹€.

1. 블둝 레벨 μš”μ†Œ(Block-level Elements)

div, p, h1~h6, ul, li, ol, table, form, section, footer 등이 μžˆλ‹€.

블둝 레벨 μš”μ†ŒλŠ” λ§ˆν¬μ—…μ„ ν•  λ•Œ 쀄이 λ°”λ€ŒλŠ” νŠΉμ„±μ„ κ°–κ³  μžˆμŠ΅λ‹ˆλ‹€. μ•„λž˜μ˜ μ˜ˆμ‹œμ—μ„œ λ§ˆν¬μ—… ν–ˆλ˜ <h1>, <h2>, <p> μš”μ†Œλ“€μ€ λΈ”λ‘μ˜ μ„±μ§ˆμ„ κ°–κ³  μžˆμ–΄ 화면상 쀄 λ°”κΏˆ ν˜„μƒμ΄ μΌμ–΄λ‚©λ‹ˆλ‹€. 즉, λ‚˜μ—΄λ  수 μ—†μŠ΅λ‹ˆλ‹€. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>블둝 레벨 μš”μ†Œ</title>
</head>
<body>
    <h1>블둝 레벨 μš”μ†Œ</h1>
    <h2>블둝 레벨 μš”μ†Œ μ„±μ§ˆ</h2>
    <p>쀄 λ°”κΏˆμ΄ μƒκΉλ‹ˆλ‹€.</p>
</body>
</html>

2. 인라인 μš”μ†Œ(Inline Element)

span, a, em, i, strong, b, del, ins, sub, sup, textarea 등이 μžˆλ‹€.

인라인 μš”μ†ŒλŠ” 블둝 레벨 μš”μ†Œμ™€ 달리 쀄 λ°”κΏˆ νŠΉμ„±μ΄ μ—†μ–΄ 행이 λ°”λ€Œμ§€ μ•Šκ³  ν•œ μ€„λ‘œ λ‚˜λž€νžˆ 좜λ ₯λ©λ‹ˆλ‹€. μ•„λž˜μ˜ μ˜ˆμ‹œμ—μ„œ λ§ˆν¬μ—… ν–ˆλ˜ <strong>, <span> μš”μ†Œλ“€μ΄ 인라인 μ„±μ§ˆμ„ κ°–κ³  있으며 행이 λ°”λ€Œμ§€ μ•Šκ³  ν•œ μ€„λ‘œ λ‚˜λž€νžˆ 좜λ ₯λ©λ‹ˆλ‹€. 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>인라인 μš”μ†Œ</title>
</head>
<body>
    <strong>인라인 μš”μ†Œ</strong>
    <span>인라인 μš”μ†ŒλŠ” ν•œ μ€„λ‘œ 좜λ ₯λ©λ‹ˆλ‹€.</span>
</body>
</html>

λ°˜μ‘ν˜•

'HTML' μΉ΄ν…Œκ³ λ¦¬μ˜ λ‹€λ₯Έ κΈ€

[HTML] ꡬ쑰 κ΄€λ ¨ μš”μ†Œ μ•Œμ•„λ³΄κΈ°  (6) 2022.08.14
[HTML] μ›Ή ν‘œμ€€ μ΄ν•΄ν•˜κΈ°  (5) 2022.08.08

κ΄€λ ¨κΈ€

λŒ“κΈ€

Reference Book

JavaScript

JavaScript

λ³΄λŸ¬κ°€κΈ°
HTML

HTML

λ³΄λŸ¬κ°€κΈ°
CSS

CSS

λ³΄λŸ¬κ°€κΈ°
κ΄‘κ³  μ€€λΉ„μ€‘μž…λ‹ˆλ‹€.

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”