5. Block & Inline Element 영역

모든 HTML 태그들은 각 태그의 용도에 따른 기본 표시 값을 가집니다. 이때 블록 레벨 요소(Block-level Elements)와 인라인 레벨 요소(Inline-level Elements) 두 가지 범주로 나뉩니다.

 

예를들면 <div>태그는 블록 레벨 요소이고, <span>태그는 인라인 레벨 요소입니다.

 

 

Block Element

• 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.
• 화면 구성이나 레이아웃을 짤 때는 블록 레벨 요소를 사용합니다.
• 블록 레벨 요소는 한칸을 모두 차지하기 때문에 세로로 나열 됩니다.
• width, height, margin 속성이 적용됩니다.

블록 레벨 요소 목록
<address>	<article>	<aside>	<blockquote>
<details>	<dialog>	<dd>	<div>
<dl>	<dt>	<fieldset>	<figcaption>
<figure>	<footer>	<form>	<h1>~ <h6>
<header>	<hgroup>	<hr>	<li>
<main>	<nav>	<ol>	<p>
<pre>	<section>	<table>	<ul>

 

 

Inline Element

• 인라인 레벨 요소는 콘텐츠의 흐름을 끊지 않고(줄바꿈X), 요소를 구성하는 태그에 할당된 공간만 차지합니다.
• 인라인 레벨 요소는 콘텐츠 영역 만큼 차지하기 때문에 가로로 나열됩니다.
• margin-top, margin-bottom 적용되지 않습니다. 대신에 line-height 이용
• width, height 속성이 적용되지 않습니다.
• 태그가 콘텐츠의 할당 된 공간만 갖고 있기 때문에 text-align과 같은 속성은 사용할 수 없습니다.

인라인 레벨 요소 목록
<a>	<abbr>	<audio>	<b>
<acronym>	<bdi>	<bdo>	<big>
<br>	<button>	<canvas>	<cite>
<code>	<data>	<datalist>	<del>
<dfn>	<em>	<embed>	<i>
<iframe>	<img>	<input>	<ins>
<kbd>	<label>	<map>	<mark>
<meter>	<noscript>	<object>	<output>
<progress>	<q>	<ruby>	<s>
<samp>	<script>	<select>	<slot>
<small>	<span>	<strong>	<sub>
<sup>	<template>	<textarea>	<time>
<u>	<var>	<video>	<wbr>

 

 

---

실습

<!-- HTML -->
<div>block1</div>
<div>block2</div>
<div>block3</div>
<span>inline1</span>
<span>inline2</span>
<span>inline3</span>

//CSS
div {
  background-color: blue;
}
span {
  background-color: yellow;
}