본문 바로가기

HTML

HTML : 블록 구조와 인라인 구조

by 코파카 2022. 8. 21.

728x90

블록 구조와 인라인 구조

HTML 태그를 배우기 전에는 요소의 유형과 성질을 먼저 알아두어야 합니다. 요소의 유형은 '블록 구조'와 '인라인 구조'로 나누어집니다.

블록 구조와 인라인 구조의 특징

요소 유형	특징
블록 구조	1. 블록 구조는 줄 바꿈이 일어납니다. 2. 블록 구조는 텍스트(문자)와 인라인 구조를 자식 요소로 포함할 수 있습니다. 3. 블록 구조 중에는 블록 구조를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다.
인라인 구조	1. 인라인 구조는 줄 바꿈이 일어나지 않습니다. 2. 인라인 구조는 텍스트(문자)와 인라인 구조를 자식 요소로 포함할 수 있습니다. 3. 인라인 구조는 블록 구조를 자식 요소로 포함할 수 없습니다.

HTML5로 넘어오면서 블록 구조와 인라인 구조는 좀 더 복잡한 콘텐츠 카테고리(콘텐츠 모델)로 대체 되었습니다. 콘텐츠의 종류와 태그들은 다음과 같습니다.

콘텐츠 종류	내용	해당 요소
메타데이터 콘텐츠 (Metadata Content)	<head> 태그 안에 포함되는 요소들로 콘텐츠의 표현, 동작 설정, 문서간 관계를 설정, 정보전달을 포함하는 요소를 의미합니다.	<base>, <link>, <meta>, <noscript>, <script>, <style>, <title>, ...
플로우 콘텐츠 (Flow Content)	<body> 태그 안에 포함되는 대부분의 요소들로 내용 흐름에 관한 요소를 의미합니다.	<h1>, ..., <h6>, <address>, <p>, <a>, <img>, <ul>, <ol>, <dl>, <table>, <form>, ...
섹션 콘텐츠 (Sectioning Content)	heading과 footer의 범위를 정의하는 요소를 의미합니다.	<article>, <aside>, <nav>, <section>
헤딩 콘텐츠 (Heading Content)	섹션의 헤더를 정의하는 요소를 의미합니다.	<h1>, ..., <h6>
프레이징 콘텐츠 (Phrasing Content)	텍스트를 마크업하는 요소를 의미합니다.	<a>, <em>, <strong>, <sub>, <sup>, <label>, ...
임베디드 콘텐츠 (Embedded Content)	HTML 문서에 다른 리소스를 삽입하는 요소를 의미합니다.	<img>, <audio>, <video>, <iframe>, ...
인터랙티브 콘텐츠 (Interactive Content)	사용자의 상호작용을 위한 요소를 의미합니다.	<a>, <button>, <audio>, <video>, <select>, ...

728x90

'HTML' 카테고리의 다른 글

HTML : 구조 관련 요소 (6)	2022.08.15
HTML : 웹 표준과 웹 접근성, 웹 호환성 (12)	2022.08.08

댓글

감사합니다. 🦙

JAVASCRIPT

HTML

CSS

광고 준비중

티스토리툴바