HTML 블록 및 인라인 요소

블록요소, 인라인요소

블록요소 (Block Element)

• 줄을 바꿔 각각 독립된 줄에 표시된다.
• 별도의 CSS 컨트롤이 없다면 해당 문서 크기만큼의 너비를 가지며, 문서의 위에서부터 차곡차곡 쌓이는 형태로 표시된다.
• 인라인 요소와 텍스트 혹은 또 다른 블록요소를 포함 할 수 있다.

인라인요소 (Inline Element)

• 다른 인라인 요소와 같은 줄에 표시된다.
• 별도의 CSS컨트롤이 없다면 해당 문서의 좌측부터 우측으로 나열되는 형태로 표시된다.
• 또 다른 인라인 요소와 텍스트를 포함 할 수 있으나, 블록요소를 포함할 수는 없다.

 

 

모든 HTML 요소에는 요소 유형에 따라 기본 표시 값이 있습니다. 두 표시 값은 블록과 인라인입니다.

 

블록 레벨 요소

블록 수준 요소는 항상 새 줄에서 시작하여 사용 가능한 전체 너비를 차지합니다 (가능한 한 왼쪽과 오른쪽으로 확장).

• Box요소
• 기본 width : 100%
• width, height, padding 값이 적용된다.

<div>Hello World</div>

Block level elements in HTML:

<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>

 

인라인 요소

인라인 요소는 새 줄에서 시작되지 않으며 필요한만큼만 폭을 차지합니다.

• Text 요소
• width, height, padding 값이 적용 안됨

<span>Hello World</span>

<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>