HTML 태그 - 블록요소 / 인라인요소 정리 본문
반응형
인라인 구조와 블럭구조에 대한 고찰
안녕하세요, 우리는 태그를 배우기전에 인라인 구조와 블럭구조를 먼저 알아야 합니다. 그래야 태그의 정확한 특성을 이해하고 적재적소에 사용할 수 있겠죠?
먼저 정리 부터 보시죠
| 요소 유형 | 특징 |
|---|---|
| 블록 레벨 요소 |
1. 블록 레벨 요소는 줄 바꿈이 일어납니다. 2. 블록 레벨 요소는 텍스트 (문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함 할 수 있는 요소와 포함될 수 없는 요소가 있습니다. |
| 인라인 요소 | 1. 인라인 요소는 줄 바꿈이 일어나지 않습니다. 2. 인라인 요소는 텍스트 (문자)와 인라인 요소를 자식 요소로 포함할 수 있습니다. 3. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다. |
어떤 태그들이 블록이고 인라인일까?
| Block형 | Inline형 |
|---|---|
| <header>, <section>, <footer>, <article>, <nav>, <div>, <form>, <ul>, <ol>, <p>, <h1~h6>, ... | <a>, <span>,<button>, <input>, <img>, <video>, <audio>, <script>, <textarea>, <strong>, ... |
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>, ... |
| 인터렉티브 콘텐츠 Interactive Content |
● 사용자의 상호작용 위한 요소를 의미 합니다. |
<a>, <button>, <audio>, <video>, <select>, ... |
반응형
'MarkUp' 카테고리의 다른 글
| CSS 색상 표현법 (8) | 2022.08.23 |
|---|---|
| CSS에서 사용하는 단위에 대한 고찰 (11) | 2022.08.23 |
| 이미지 IR 효과와 이미지 스플라이트 기법을 알아보자 (10) | 2022.08.19 |
| CSS - SCSS가 뭘까? (10) | 2022.08.18 |
| 정규식 표현 맛보기 (7) | 2022.08.16 |
'MarkUp' 관련글
더보기
Comments