Skip to content

ํƒœ๊ทธ์˜ ๋ถ„๋ฅ˜ (Inline vs Block)

  • Web
  • Html
  • Css

August 06, 2022

ํƒœ๊ทธ์˜ ๋ถ„๋ฅ˜ (Inline vs Block)

๐ŸŸก Inline - level element(์ธ๋ผ์ธ ์š”์†Œ)

  • <span>, <strong>, <em>, <a>
  • ์ •๋ ฌ ๋ฐฉ์‹ : ์ˆ˜ํ‰ ์ •๋ ฌ(์ขŒ์šฐ ์ •๋ ฌ)
  • width(๋„ˆ๋น„) = ์ฝ˜ํ…์ธ  ์š”์†Œ์˜ ๊ธธ์ด/์–‘
  • inline์š”์†Œ๋Š” block์š”์†Œ์˜ ์ž์‹๊ณ„์ธต์œผ๋กœ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
  • inline์š”์†Œ ๊ฐ„ ์„œ๋กœ ๋ถ€๋ชจ์ž์‹๊ด€๊ณ„ ์„ฑ๋ฆฝ ๊ฐ€๋Šฅ.(๋‹จ ์˜ˆ์™ธ๋„ ์กด์žฌ)

โ†’ ์ธ๋ผ์ธ ์š”์†Œ : <a>,<abbr>,<acronym>,<b>,<bdo>,<big>,<br>,<button>,<cite>,<code>,<dfn>,<em>,<i>,<img>,<input>,<kbd>,<label>,<map>,<object>,<output>,<q>,<samp>,<script>,<select>,<small>,<span>,<strong>,<sub>,<sup>,<textarea>,<time>,<tt>,<var>

๐ŸŸก Block - level element(๋ธ”๋Ÿญ ์š”์†Œ)

  • <div>, <p>๊ฐ€ ๊ฐ€์žฅ ๊ธฐ๋ณธ์ ์ธ ๋ธ”๋Ÿญ์š”์†Œ์ด๋‹ค.
  • ์ž๋™์ค„๋ฐ”๊ฟˆ์ด ์ ์šฉ๋˜๋ฉฐ, ๊ธฐ๋ณธ์ ์œผ๋กœ ๋„ˆ๋น„ 100% ๊ฐ’์„ ๊ฐ€์ง„๋‹ค.
  • ๋„ˆ๋น„(width)์™€ ๋†’์ด(height)๋ฅผ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • margin๊ณผ padding์„ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

โ†’ ๋ธ”๋Ÿญ์š”์†Œ : <address>, <article>, <aside>, <blockquote>, <canvas>, <div>, <dl>, <dt>, <dd>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li> , <main>,<nav>, <noscript>, <ol>, <p>, <pre>, <section>,<table>, <tfoot>, <ul>, <video>

Previous Post

Css(table)

Css(table)
Next Post

HTML5 ์ •๋ณด์˜ ๊ตฌ์กฐ์  ์ง„ํ™”

HTML5 ์ •๋ณด์˜ ๊ตฌ์กฐ์  ์ง„ํ™”

ยฉ 2023 Haeun Choi

  • Github
  • Contact