블록 구조와 인라인 구조
HTML의 구조는 블록 구조와 인라인 구조로 분류 되어 있습니다.
블록 구조
블록 구조는 줄 바꿈이 일어나는 형태로 영역의 넓이가 상위 영역의 전체만큼 만들어 지는 형태 입니다. 블록요소는 몇몇을 제외한 블록 요소를 포함하고, 인라인 요소까지 포함합니다.
p {
display: block;
}
<div>, <p>, <h1~h6>, <li>, <ul>, <ol>, <section>, <footer> 태그 등이 주된 블록 구조 입니다.
인라인 구조
인라인 구조는 글자와 같이 옆으로 나열되는 형태로 줄 바꿈이 일어나지 않는 요소입니다. 인라인 구조는 안에 있는 글자와 같은 내용 길이에 맞게 크기를 차지 하는 성질이 있습니다.
span {
display: inline;
}
<span>, <a>, <em>, <strong> 등이 대표적인 인라인 구조를 가지는 태그입니다. 인라인 태그는 같은 인라인 요소를 포함 할 수 있지만, 블록 요소는 포함이 불가능 합니다. 인라인 구조는 width, height, margin 등이 적용이 되지 않습니다.(단, margin은 좌,우 가능, padding은 적용가능)
| 요소 유형 | 특징 |
|---|---|
| 블록 레벨 요소 | 1. 블록 레벨 요소는 줄 바꿈이 일어납니다. |
| 2. 블록 레벨 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. | |
| 3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함할 수 없는 요소가 있습니다. | |
| 인라인 요소 | 1. 인라인 요소는 줄 바꿈이 일어나지 않습니다. |
| 2.인라인 요소는 텍스트(문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. | |
| 3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다. |
| 콘텐츠 종류 | 내용 | 해당 요소 |
|---|---|---|
| 메타데이터 콘텐츠 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의 범위를 정의하는 요소를 의미합니다. | <drticle>, <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>, ... |
| 인터랙티브 콘텐츠 Interactive Content |
사용자의 상호작용 위한 요소를 의미합니다. | <a>, <button>, <audio>, <video>, <select>, ... |
'HTML' 카테고리의 다른 글
| HTML - 구조 관련 요소 (5) | 2022.08.15 |
|---|---|
| 웹 표준/웹 호환성/웹 접근성 (7) | 2022.08.08 |
| UI/UX 콘셉트 기획 발표 자료 (4) | 2022.07.26 |
댓글