| 블록 레벨 요소 (Block-level) | 인라인 요소(Inline) |
| 줄 바꿈 현상 (새로운 줄에서 시작하고, 좌우 양쪽으로 너비 차지) |
줄 바꿈 현상 X (새로운 줄을 만들지 않으며 필요한 너비만 차지) |
| 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있다. | |
| 때때로 다른 블록 레벨 요소를 자식 요소에 포함할 수 있다. | 블록 레벨 요소를 자식 요소에 포함할 수 없다. |
1. 블록 레벨 요소
- 블록 레벨 요소의 종류 (기본값이 블록 레벨 요소의 목록)
| <address> 연락처 정보 |
<fieldset> 필드 집합의 라벨 |
<main> 문서에서 하나 뿐인 중심 콘텐츠 |
| <article> 단락 콘텐츠 |
<figcaption> 그림 설명 |
<nav> 탐색 링크 포함(내비게이션) |
| <aside> 부가 콘텐츠 |
<figure> 미디어 콘텐츠 그룹과 설명 |
<ol> 순서 있는 목록 |
| <blockquote> 긴("블록") 인용구 (들여쓰기) |
<footer> 페이지나 구역의 푸터 |
<p> 문단 |
| <details> 상세 정보 위젯 |
<form> 입력 폼 |
<pre> 미리 서식 적용한 글(작성 그대로 출력) |
| <dialog> 대화 상자 |
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> 1~6단계의 제목 |
<section> 웹 페이지의 구역 |
| <dd> 설명 목록의 정의 설명 |
<header> 페이지나 구역의 헤더 |
<table> 표 |
| <div> 문서의 분할 |
<hgroup> 헤더 정보 그룹 |
<ul> 순서 없는 목록 |
| <dl> 설명 목록 |
<hr> 수평선(구분선) |
|
| <dt> 설명 목록의 정의 |
<li> 목록의 항목 |
- 블록 레벨 요소의 예제
<body>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<hr>
<div>div</div>
<header>header</header>
<nav>nav</nav>
<section>section</section>
<main>main</main>
<article>article</article>
<aside>aside</aside>
<footer>footer</footer>
<ul>ul
<li>li</li>
</ul>
<ol>ol
<li>li</li>
</ol>
</body>
</html>h1
h2
h3
h4
h5
h6
div
- ul
- li
- ol
- li
2. 인라인 요소
- 인라인 요소의 종류 (기본값이 인라인 요소의 목록)
| <a> 하이퍼링크 기능 태그 |
<img> 이미지 삽입 |
<select> 옵션 메뉴를 제공하는 컨트롤 |
| <audio> 소리 콘텐츠 (컨트롤 있을 시) |
<input> 사용자의 데이터를 받을 수 있는 태그 |
<small> 텍스트를 작게 |
| <b> 텍스트를 굵게 (의미X) |
<ins> 문서에 추가된 텍스트의 범위 (밑줄) |
<span> 스타일 적용을 위한 텍스트 그룹 |
| <br> 줄 바꿈 태그 |
<label> 사용자 인터페이스 항목의 설명 |
<strong> 텍스트를 굵게 (의미O) |
| <button> 클릭 버튼 |
<map> 이미지 맵 정의 |
<sub> 아래 첨자 텍스트 |
| <del> 제거된 텍스트의 범위 (취소선) |
<mark> 텍스트 하이라이트 (형광펜효과) |
<sup> 위 첨자 텍스트 |
| <em> 텍스트 기울임꼴 (강세) |
<q> 텍스트가 짧은 인라인 인용문 |
<textarea> 텍스트 박스 |
| <i> 택스트 기울임꼴 (구분) |
<s> 텍스트 취소선 |
<video> 동영상 콘텐츠 |
| <iframe> HTML 문서에 다른 HTML 문서를 포함 |
<script> 실행 가능한 코드를 포함 or 참조 |
- 인라인 요소의 예제
<a href="#">a</a>
<b>b</b>
<br>br태그 줄바꿈<br>
<button>button</button>
<del>del</del>
<em>em</em>
<i>i</i>
<ins>ins</ins>
<mark>mark</mark>
<q>q</q>
<small>small</small>
<strong>strong</strong>
<sub>sub</sub>
<sup>sup</sup>'HTML' 카테고리의 다른 글
| HTML5 Tag-[구조 관련 요소] 레이아웃 구성(시맨틱태그) (0) | 2020.08.02 |
|---|---|
| HTML5 Tag-div, span [그룹 요소] (0) | 2020.08.02 |
| HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 4] <form> 사용자 입력 속성 (0) | 2020.08.01 |
| HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 3] <form> label (0) | 2020.08.01 |
| HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 2] <form> input (0) | 2020.08.01 |
댓글