블록 레벨 요소와 인라인 요소
01. 블록 레벨 요소(Block-level Element)
블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>블록 레벨 요소</title>
</head>
<body>
<h1>블록 레벨 요소</h1>
<h2>블록 레벨 요소 성질</h2>
<p>줄 바꿈이 생깁니다.</p>
</body>
</html>
위 예시에서 보이는 <h1>, <h2>, <p> 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈 현상이 일어납니다.
02. 인라인 요소(inline Element)
인라인 요소는 블록 레벨 요소와는 달리 줄 바꿈 특성이 없어 행이 바뀌지 않고 한 줄로 출력됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>인라인 요소</title>
</head>
<body>
<strong>인라인 요소</strong>
<span>인라인 요소는 한 줄로 출력됩니다.</span>
</body>
</html>
위 예시에서 마크업 한 <strong>, <span> 요소들은 인라인 성질츨 가지고 있어 행이 바뀌지 않고 한 줄로 출력됩니다.
03. 블록 레벨 요소와 인라인 요소의 특징
마크업을 할 때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야만 문법적 오류를 방지할 수 있습니다.
| 요소 유형 | 특징 |
|---|---|
| 블록 레벨 요소 | 1. 줄 바꿈이 일어납니다. |
| 2. 텍스트(문자)와 인라인 요소를 자식 요소로 포한할 수 있습니다. | |
| 3. 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다. | |
| 인라인 요소 | 1. 줄 바꿈이 일어나지 않습니다. |
| 2. 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. | |
| 3. 블록 레벨 요소를 자식 요소로 포함할 수 없습니다. |
HTML5로 넘어오면서 블록 레벨 요소와 인라인 요소는 좀 더 복잡한 콘첸츠 카체고리(콘텐츠 모델)로 대체 되었습니다.
콘텐츠의 종류와 태그들은 다음과 같습니다.
| 콘텐츠 종류 | 내용 | 해당 요소 |
|---|---|---|
| 메타데이터 콘텐츠 Metadata 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>, <form>, ... |
| 섹션 콘텐츠 Sectioning Content |
heading과 footer의 범위를 정의하는 요소를 의미합니다. | <article>, <aside>, <nav>, <section> |
| 헤딩 콘텐츠 Heading Content |
섹션의 헤더를 정의하는 요소를 의미합니다. | <h1>, <h2>, <h3>, <h4>, <h5>, <h6> |
| 프레이징 콘텐츠 Phrasing Content |
텍스트를 마크업하는 요소를 의미합니다. |
<a>, <em>, <strong>, <sub>, <sup>, <label>, ... |
| 임베디드 콘텐츠 Embedded Content |
HTML 문서에 다른 리소스를 삽입하는 요소를 의미합니다. | <img>, <audio>, <video>, <iframe>, ... |
| 인터랙티브 콘텐츠 Interactve Content |
사용자의 상호작용 위한 요소를 의미합니다. |
<a>, <button>, <audio>, <video>, <select>, ... |