Skip to content

Latest commit

Β 

History

History
44 lines (36 loc) Β· 1.33 KB

html21.md

File metadata and controls

44 lines (36 loc) Β· 1.33 KB
Raw

[HTML μ œλŒ€λ‘œ λ°°μ›Œ 볼래?] Ep#21-Block μš”μ†Œμ™€ Inline μš”μ†Œ

Block μš”μ†Œμ™€ Inline μš”μ†Œ

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <!-- Block level elements -->
    <!-- ν™”λ©΄μ˜ λ„ˆλΉ„ 전체 차지 -->
    <!-- address, ul, li, dl, dt, ol, p, table, div, ... -->
    <h1 style="background-color: red">제λͺ©μž…λ‹ˆλ‹€.</h1>
    μ•ˆλ…•ν•˜μ„Έμš”.
    <p style="background-color: green">λ¬Έμž₯μž…λ‹ˆλ‹€.</p>

    <!-- Inline elements -->
    <!-- a, span, img, ... -->
    <a href="" style="background-color: yellow">개발자의 ν’ˆκ²©</a> μ•ˆλ…•ν•˜μ„Έμš”.
    <span style="display: block; background-color: yellow"
      >span νƒœκ·Έμž…λ‹ˆλ‹€.</span
    >
    <script></script>
  </body>
</html>

[Note]

  • HTML μš”μ†Œλ“€ λ³΄μ—¬μ§€λŠ” ν˜•νƒœ 닀름
    • 블둝 μš”μ†Œ; 무쑰건 ν•œμ€„ 전체 차지 (ν™”λ©΄μ˜ μ‹œμž‘κ³Ό 끝)
      • μ‹€μ œ 컨텐츠 λ„ˆλΉ„μ™€ 상관없이 ν™”λ©΄μ˜ 전체 길이만큼 λ‹€ μ°¨μ§€ν•˜λŠ” μš”μ†Œ
    • 인라인 μš”μ†Œ; HTML μš”μ†Œκ°€ 가지고 μžˆλŠ” λ„ˆλΉ„ 만큼만 차지
      • μ‹€μ œ 컨텐츠가 가지고 μžˆλŠ” λ„ˆλΉ„λ§ŒνΌλ§Œ 차지
    • λ””μžμΈ 속성을 μ΄μš©ν•˜μ—¬ 블둝, 인라인 νŠΉμ„± λ°”κΏ€ 수 있음
    • μœ„μ˜ 블둝, 인라인 μš”μ†Œλ“€μ€ 기본값이 κ·Έλ ‡λ‹€λŠ” κ²ƒμž„

Reference