HTML 블록 및 인라인 요소(HTML Block and Inline Elements)

Every HTML element has a default display value depending on what type of element it is. 

모든 HTML 요소는 요소 유형에 따라 기본 표시 값을가집니다. 

The default display value for most elements is block or inline.

대부분의 요소에 대한 기본 표시 값은 블록 또는 인라인입니다.

---

Block-level Elements

모든 HTML 요소는 요소 유형에 따라 기본 블록 수준 요소

A block-level element always starts on a new line and takes up the full width available 

블록 수준 요소는 항상 새 줄에서 시작하여 사용할 수있는 전체 너비를 사용합니다 

(stretches out to the left and right as far as it can).

(가능한 한 왼쪽 및 오른쪽으로 뻗어 있음).

The <div> element is a block-level element.

대부분의 요소에 대한 기본 표시 값은 블록 또는 인라인입니다.

Example

<div>Hello</div>
<div>World</div>

Try it Yourself »

Block level elements in HTML:

HTML의 블록 수준 요소 :

<address>

<article>

<aside>

<blockquote>

<canvas>

<dd>

<div>

<dl>

<dt>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h1>-<h6>

<header>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<output>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>

---

Inline Elements

인라인 요소

An inline element does not start on a new line and only takes up as much width as necessary.

인라인 요소는 새 줄에서 시작하지 않고 필요한만큼만 너비를 차지합니다.

This is an inline <span> element inside a paragraph.

이것은 단락 안에 있는 인라인 <span> 요소 입니다.

Example

<span>Hello</span>
<span>World</span>

Try it Yourself »

Inline elements in HTML:

HTML의 인라인 요소 :

<a>

<abbr>

<acronym>

<b>

<bdo>

<big>

<br>

<button>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<object>

<q>

<samp>

<script>

<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea>

<time>

<tt>

<var>

---

The <div> Element

<div> 요소

The <div> element is often used as a container for other HTML elements.

<div>요소는 종종 다른 HTML 요소에 대한 컨테이너로 사용됩니다.

The <div> element has no required attributes, but style, class and id are common.

<div>요소에 속성이 필요 없지만,있다 style, class그리고 id일반적이다.

When used together with CSS, the <div> element can be used to style blocks of content:

CSS와 함께 사용하면 <div>요소를 사용하여 콘텐츠 블록을 스타일 지정할 수 있습니다.

Example

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

Try it Yourself »

---

The <span> Element

<span> 요소

The <span> element is often used as a container for some text.

<span>요소는 종종 텍스트에 대한 컨테이너로 사용됩니다.

The <span> element has no required attributes, but style, class and id are common.

<span>요소에 속성이 필요 없지만,있다 style, class그리고 id일반적이다.

When used together with CSS, the <span> element can be used to style parts of the text:

CSS와 함께 사용하면 <span>요소를 사용하여 텍스트의 일부분을 스타일 지정할 수 있습니다.

Example

<h1>My <span style="color:red">Important</span> Heading</h1>

Try it Yourself »

---

HTML Grouping Tags

HTML 그룹화 태그

Tag	Description
<div>	Defines a section in a document (block-level)
<span>	Defines a section in a document (inline)

---

출처 : W3School.com