모든 HTML 요소는 그 요소의 유형에 따라 기본 display 값이 있습니다.
display 값은 두 가지가 있습니다. 블록Block 과 인라인Inline 입니다.
Block-level Elements
블록 요소는 항상 새로운 줄에서 시작되며, 전체 사용 가능한 너비를 차지합니다. 이는 블록 요소가 그 전후에 있는 모든 요소와 분리되어 있는 것처럼 보이게 만듭니다. 블록 요소는 보통 구조적인 요소로 사용됩니다.
<div>: 일반적으로 스타일링이나 스크립트 작성을 목적으로 사용됩니다.
<h1> ~ <h6>: 제목 태그입니다. 숫자가 높을수록 제목의 수준이 낮아집니다.
<p>: 문단을 정의합니다.
<form>: 사용자 입력을 위한 양식을 정의합니다.
<header>, <footer>, <section> 등: 웹 문서의 구조를 정의하는 시멘틱 태그입니다.
<!DOCTYPE html>
<html>
<body>
<p id="demo1-p" style="border: 1px solid black">Block p tag</p>
<div id="demo1-div" style="border: 1px solid black">Block div tag</div>
<p>P 요소와 DIV 요소는 모두 블록 요소이며, 항상 새로운 줄에서 시작하고<br>
사용 가능한 전체 너비를 차지합니다(가능한 한 왼쪽과 오른쪽으로 뻗어 나갑니다).</p>
</body>
</html>Block p tag
P 요소와 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>
Inline Elements
인라인 요소는 새로운 줄에서 시작되지 않으며 필요한 만큼의 너비만 차지합니다.
블록 요소와 달리 인라인 요소는 텍스트나 다른 인라인 요소 내에서 사용됩니다.
<!DOCTYPE html>
<html>
<body>
<p> p 태크 안에서
<span id="demo2-span" style="border: 1px solid black">
span Inline 요소 입니다.
</span>
이렇게 사용될 수 있습니다.</p>
<p>The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.</p>
</body>
</html>p 태크 안에서 span Inline 요소 입니다. 이렇게 사용될 수 있습니다.
The SPAN element is an inline element, and will not start on a new line and only takes up as much width as necessary.
the inline elements in HTML
<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>
블록 요소와 인라인 요소의 가장 큰 차이점은 페이지 레이아웃에 미치는 영향입니다.
블록 요소는 전체 블록(즉, 줄 전체)을 차지하며, 인라인 요소는 텍스트의 흐름에 맞게 존재합니다.
따라서 블록 요소는 일반적으로 큰 레이아웃 구성 요소(예: 문단, 섹션, 헤더 등)로 사용되며,
인라인 요소는 더 작고 세부적인 요소(예: 하이퍼링크, 강조 텍스트 등)로 사용됩니다.
'FRONTEND > HTML' 카테고리의 다른 글
| HTML 튜토리얼 - HTML id Attribute (0) | 2023.08.04 |
|---|---|
| HTML 튜토리얼 - HTML class Attribute (0) | 2023.07.28 |
| HTML 튜토리얼 - HTML Lists (0) | 2023.07.21 |
| HTML 튜토리얼 - HTML Tables (0) | 2023.07.19 |
| HTML 튜토리얼 - HTML Page Title (0) | 2023.07.17 |