반응형
Block태그와 Inline 태그 종류와 차이점
모든 HTML
요소에는 요소 유형에 따라 기본 표시 값이 있습니다.
표시 값에는 블록과 인라인의 두 가지가 있습니다.
Block 태그
- 항상 새 줄에서 시작하고 브라우저는 자동으로 요소 앞뒤에 약간의 공백(여백)을 추가합니다.
- 항상 사용 가능한 전체 너비를 차지합니다.
- 부모 태그의 너비를 가져옵니다. 높이는 자신의 태그의 자식태그의 높이를 가져옵니다.
- 일반적으로 사용되는
Block
태그는<p>
와<div>
입니다.
Block 태그 종류
<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 태그
Inline
태그는 필요한 만큼만 너비를 차지합니다. 대표적으로 <span>
태그가 많이 쓰입니다.
Iinline 태그 종류
<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>
읽어주셔서 감사합니다🤟
참고 문헌 REFERENCE
HTML Block and Inline Elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'FRONT-END > HTML' 카테고리의 다른 글
[HTML] textarea의 placeholder속성 줄 바꿈 처리 (2) | 2022.09.14 |
---|---|
[HTML] Input 내용 버튼 클릭 삭제 (3) | 2022.09.08 |
[HTML] 폰트 미리 로드하여 레이아웃 개선하기 (1) | 2022.08.24 |
[HTML #8] 표 table, tbody, tr, td, thead, caption (2) | 2022.07.24 |
[HTML #7] 이미지 img (src를 CSS로 대체 하는 방법) (4) | 2022.07.24 |