HTML 레퍼런스 북
블록 레벨 요소와 인라인 요소
1. 블록 레벨 요소
블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 구조의 특징은 한 줄에 하나만 표현되는 것, 즉 가로로 정렬이 되지 않는다는 것입니다. 또한 영역을 포현하는 부분이기 때문에, 마진 값이나 패딩 값이 적용됩니다. 블록 구조는 블록 구조 안에 블록 구조와 인라인 구조 모두 올 수 있습니다.
2. 인라인 요소
인라인 요소는 블록 레벨 요소처럼 행이 바뀌지 않고 한 줄로 출력됩니다. 한 줄에 여러개가 표현이 되며, 가로로 정렬이 됩니다. 영역은 텍스트 부분만 영역으로 존재하기 때문에, 패딩이나 마진이 적용되진 않습니다. 하지만 좌우에는 적용됩니다. 인라인 구조는 인라인 구조 안에 블록 구조가 올 수 없습니다.
블록 태그/인라인 태그
| 블록 태그 | 인라인 태그 |
|---|---|
|
<div>, <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> |
<span>, <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> |
3. 블록 레벨 요소와 인라인 요소의 특성
마크업을 할 때 블록 레벨 요소와 인라인 요소의 특성을 잘 알고 있어야만 문법적 오류를 방지할 수 있습니다.
-블록 레벨 요소와 인라인 요소의 특징 정리
| 요소 유형 | 특징 |
|---|---|
| 블록 레벨 요소 | 1. 블록 레벨 요소는 줄 바꿈이 일어납니다. 2. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다. |
| 인라인 요소 | 1. 인라인 요소는 줄 바꿈이 일어나지 않습니다. 2. 인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다. |
| 콘텐츠 종류 | 내용 | 해당 요소 |
|---|---|---|
| 메타데이터 콘텐츠 | <head> 태그 안에 포함되는 요소들로 콘텐츠의 표현,동작 설정, 문서간 관계를 설정, 정보전달을 포함하는 요소를 의미합니다. | <base>, <link>, <meta>, <noscript>, <script>, <style>, <title>, ... |
| 플로우 콘텐츠 | <body> 태그 안에 포함되는 대부분의 요소들로 내용 흐름에 관한 요소를 의미합니다. | <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <address>, <p>, <a>, <img>, <ul>, <ol>,<dl>, <table>, <form>, ... |
| 섹션 콘텐츠 | heading과 footer의 점위를 정의하는 요소를 의미합니다. | <article>, <aside>, <nav>, <section>, ... |
| 헤딩 콘텐츠 | 섹션의 헤더를 정의하는 요소를 의미합니다. | <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, ... |
| 프레이징 콘텐츠 | 텍스트를 마크업하는 요소를 의미합니다. | <a>, <em>, <storng>, <sub>, <sup>, <label>, ... |
| 임베디드 콘텐츠 | HTML문서에 다른 리소스를 삽입하는 요소를 의미합니다. | <img>, <audio>, <video>, <iframe>, ... |
| 인터랙티브 콘텐츠 | 사용자의 상호작용을 위한 요소를 의미합니다. | <a>, <button>, <audio>, <video>, <select>, ... |