HTML 레퍼런스 북
블록 레벨 요소와 인라인요소
1. 블록 레벨 요소 (Block-level Element)
콘텐츠의 흐름이 끊기고, 요소를 구성하는 줄 하나를 다 차지합니다.
마크업 했던 <h1>,
<h2>, <p> 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈 현상이 일어나는 것을 볼 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨 요소</title>
</head>
<body>
<h1>블록 레벨 요소</h1>
<h2>블록 레벨 요소 성질</h2>
<p>줄 바꿈이 생깁니다.</p>
</body>
</html>
See the Pen 블록 by kimyihyung (@kimyihyung) on CodePen.
2. 인라인 요소 (Inline Element)
콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그를 할당된 공간만 차지합니다.
마크업 했던 <strong>,
<span> 요소들은 인라인 성질을 가지고 있어 행이 바뀌지 않고 한 줄로 출력 된 것을 볼 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 요소</title>
</head>
<body>
<strong>인라인 요소</strong>
<span>인라인 요소는 한 줄로 출력됩니다.</span>
</body>
</html>
See the Pen 인라인 by kimyihyung (@kimyihyung) on CodePen.
3. 블록 레벨 요소와 인라인 요소의 특징
| 요소 유형 | 특징 |
|---|---|
| 블록 레벨 요소 | 1. 블록 레벨 요소는 줄 바꿈이 일어납니다. 2. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다. |
| 인라인 요소 | 1. 인라인 요소는 줄 바꿈이 일어나지 않습니다. 2. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다. |
블록구조와 인라인구조의 태그 종류입니다.
| 구조 | 태그 종류 |
|---|---|
| 블록 | <address>, <article>, <aside>, <audio>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <ul>, <video> |
| 인라인 | <a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br/>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <small>, <script>, <select>, <span>, <strong>, <sub>, <sup>, <textarea>, <tt>, <var> |
HTML5로 넘어오면서 블록 레벨 요소와 인라인요소는 좀 더 복잡한 콘텐츠 카테고리 (콘텐츠 모델)로 대체 되었습니다. 콘텐츠의 종류와 태그는 다음과 같습니다.
| 콘텐츠 종류 | 내용 | 해당 요소 |
|---|---|---|
| 메타데이터 콘텐츠 Metadate Content |
<head>태그 안에 포함되는 요소들로 콘텐츠의 표현, 동작 설정, 문서간 관 계를 설정, 정보전달을 포함하는 요소를 의미 | <base>,<link>,<meta>,<noscript>, <script>,<style>,<title> |
| 플로우 콘텐츠 Flow Content |
<body>태그 안에 포함되는 대부분의 요소들로 내용 흐름에 관한 요소를 의미 |
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> <address>,<p>,<a>,<img>,<ul>,<ol> <dl>,<table>,<from>,... |
| 섹션 콘텐츠 Section Content |
heading과 footer의 범위를 정의하는 요소를 의미 |
<article>,<aside>,<nav>,<section> |
| 해당 콘텐츠 Heading Content |
섹션의 헤더를 정의하는 요소를 의미 |
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> |
| 프레이징 콘텐츠 Phrasing Content |
텍스트를 마크업하는 요소를 의미 | <a>,<em>,<strong>,<sub>,<sup>, <label>,.... |
| 임베디드 콘텐츠 Embadded Content |
HTML 문서에 다른 리소스르르 삽입하는 요소를 의미 | <img>,<audio>,<video>,<iframe>,... <label>,.... |
| 인터랙티브 콘텐츠 Interactive Content |
사용자의 상호작용 위한 요소를 의미 | <a>,<button>,<audio>,<video>, <select>,... |