블록 구조 / 인라인 구조

728x90

블록 레벨 요소와 인라인 요소

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. 인라인 요소는 블록 레벨 요소를 자식 요소로 포함할 수 없습니다.

-HTML5로 넘어오며 좀 더 복잡해진 콘텐츠의 종류와 태그들

콘텐츠 종류	내용	해당 요소
메타데이터 콘텐츠	<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>, ...

728x90

'HTML' 카테고리의 다른 글

구조 관련 요소 (2)	2022.08.17
웹 접근성/웹 호환성 (5)	2022.08.09

🎆Youcodein🎇

블록 구조 / 인라인 구조

블록 레벨 요소와 인라인 요소

1. 블록 레벨 요소

2. 인라인 요소

블록 태그/인라인 태그

3. 블록 레벨 요소와 인라인 요소의 특성

-블록 레벨 요소와 인라인 요소의 특징 정리

'HTML' 카테고리의 다른 글

댓글

HTML

CSS

JAVASCRIPT

티스토리툴바

블록 구조 / 인라인 구조

블록 레벨 요소와 인라인 요소

1. 블록 레벨 요소

2. 인라인 요소

블록 태그/인라인 태그

3. 블록 레벨 요소와 인라인 요소의 특성

-블록 레벨 요소와 인라인 요소의 특징 정리

'HTML' 카테고리의 다른 글

관련글

댓글

HTML

CSS

JAVASCRIPT

티스토리툴바