HTML block 레벨 요소, inline 레벨 요소

block 레벨은 html 문서에서 공간에 상관없이 한 줄에 하나의 요소가 배치되는 요소이다.
inline 레벨은 html 문서에서 공간이 허용하면 바로 옆에 배치되는 요소이다.

아래 코드의 결과는

<div> this is a div. <i>And</i> i am ~ </div>
<div> this is a div. <pre>And</pre>i am ~ </div>

다음과 같이 된다.

this is a div. And i am ~
this is a div
And
i am ~

div 태그는 는 block 요소이니 한 줄을 차지하고, 그 안의 i 태그는 inline 요소이기 때문에, 앞의 텍스트에 붙여서 나란히 놓여진다.

pre 태그는 block 레벨 요소이니 한 줄을 차지하게 되어 그 위에 따라오는 "i am ~" 은 줄바꿈이 되어 총 4줄로 렌더링 된다.

block 레벨 요소

아래의 표는 MDN 에서 가져온 block 레벨 요소의 목록이다.

block 레벨 요소	의미
<address>	Contact information
<article>	Article content.
<aside>	Aside content.
<blockquote>	Long ("block") quotation.
<details>	Disclosure widget.
<dialog>	Dialog box.
<dd>	Describes a term in a description list.
<div>	Document division.
<dl>	Description list.
<dt>	Description list term.
<fieldset>	Field set label.
<figcaption>	Figure caption.
<figure>	Groups media content with a caption (see
<footer>	Section or page footer.
<form>	Input form.
<h1~h6>	Heading levels 1-6.
<header>	Section or page header.
<hgroup>	Groups header information.
<hr>	Horizontal rule (dividing line).
<li>	List item.
<main>	Contains the central content unique to this document.
<nav>	Contains navigation links.
<ol>	Ordered list.
<p>	Paragraph.
<pre>	Preformatted text.
<section>	Section of a web page.
<table>

inline 레벨 요소

아래의 표는 MDN 에서 가져온 inline 레벨 요소의 목록이다.

inline 레벨 요소들
<abbr>	<acronym>	<b>
<bdi>	<big>	<br>
<canvas>	<cite>	<data>
<datalist>	<dfn>	<em>
<i>	<iframe>	<input>
<ins>	<label>	<map>
<meter>	<noscript>	<output>
<picture>	<q>	<ruby>
<samp>	<script>	<slot>
<small>	<strong>	<sub>
<svg>	<template>	<time>
<u>	<var>	<video>

**
출처 MDN Block-level elements