블록 / 인라인 요소

728x90

⭐️ 블록 / 인라인 요소 ⭐️

01. 블록 레벨 요소 (Block-level Element)

블록 레벨 요소는 출력 화면에서 사용 가능한 최대 너비를 차지하는 요소를 의미합니다.

[1] 블록 레벨 요소의 특성

요소 유형	번호	특성
블록 레벨 요소	1	출력 화면에서 줄 바꿈이 일어납니다.
	2	width, height, margin, padding 속성을 설정할 수 있습니다.
	3	문자(Text)와 인라인 요소를 자식 요소로 포함할 수 있습니다.
	4	블록 레벨 요소 중에는 블록 레벨 요소를 자식 요소로 포함할 수 있는 요소와 포함할 수 없는 요소가 있습니다.

# 블록 레벨 요소의 예

   ___ 참고하기 ___
`1 요소(element)는 HTML 문서를 이루는 개별적인 요소를 의미하며, 요소의 유형은 블록 레벨 요소와 인라인 요소로 나눠집니다.
`2 CSS의 display 속성은 브라우저에서 요소들이 언제, 어떻게 보이는가를 결정합니다.
      - display: block; 으로 지정된 요소들은 다른 요소를 밀어내고 혼자 한 줄을 다 차지합니다.
      - display: inline; 으로 지정된 요소들은 한 줄로 나란히 배치됩니다.
                              인라인 요소는 해당 태그가 마크업 하고 있는 컨텐츠 내용의 크기만큼만 공간을 차지하므로, width 와 height 값을 지정해도 반영되지 않습니다.
      - display: inline-block; 으로 지정된 요소들은 기본적으로 한 줄에 나란히 배치되지만, width 와 height 값을 설정할 수 있습니다.

02. 인라인 요소 (Inline Element)

인라인 요소는 출력 화면에서 필요한 너비만 차지하며, 하나의 줄 안에 포함되는 요소를 의미합니다.

[1] 인라인 요소의 특성

요소 유형	번호	특성
인라인 요소	1	출력 화면에서 행이 바뀌지 않고 한 줄로 나란히 출력됩니다.
	2	width, height 속성을 설정해도 반영되지 않습니다. ☛ 해당 태그의 컨텐츠 내용의 크기만큼만 공간을 차지하기 때문입니다. margin 속성은 요소 위치의 좌우에만 반영됩니다. ☛ 상,하단 여백은 margin이 아니라 line-height 속성으로 설정합니다. ☛ 인라인 태그가 연속으로 사용되는 경우, 최소한의 간격을 유지하기 위해 좌우에 약 5px의 외부 여백이 기본적으로 생깁니다. padding 속성은 요소 위치의 좌우에만 반영됩니다. ☛ (0.5x 설정) 아래의 예시를 보면, padding 값이 하단에 반영된 것처럼 보입니다. 그러나 줄이 넘어가면 하단에 padding이 적용되지 않아 글자가 위로 올라온 것을 확인할 수 있습니다.
	3	문자(Text)와 인라인 요소를 자식 요소로 포함할 수 있습니다.
	4	블록 레벨 요소를 자식 요소로 포함할 수 없습니다.

# 인라인 요소의 예

03. 콘텐츠 카테고리 (콘텐츠 모델)

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)	문자(Text)를 마크업하는 요소	<a>, <em>, <strong>, <sub>, <sup>, <label>, ...
임베디드 콘텐츠 (Embedded Content)	HTML 문서에 다른 리소스를 삽입하는 요소	<img>, <audio>, <video>, <iframe>, ...
인터랙티브 콘텐츠 (Interactive Content)	사용자의 상호작용을 위한 요소	<a>, <button>, <audio>, <video>, <select>, ...

728x90

'HTML' 카테고리의 다른 글

시멘틱 구조 요소 (3)	2022.08.16
W3C (웹 표준, 웹 접근성, 웹 호환성) (7)	2022.08.09
기본 구성 (3)	2022.08.06

깜냥깜냥🐾코딩 혜윰

블록 / 인라인 요소