궁금한 내용을 검색해보세요!
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
서근 개발노트
티스토리에 팔로잉
FRONT-END/HTML

[HTML] Block태그와 Inline 태그 종류와 차이점

서근
QUOTE THE DAY

-
Written by SeogunSEOGUN

반응형

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

 


잘못된 내용이 있으면 언제든 피드백 부탁드립니다.


서근


위처럼 이미지 와 함께 댓글을 작성할 수 있습니다.