HTML 요소 - inline-element, block-element

HTML의 모든 요소에는

요소 유형에 따라 기본 표시 값이 있다.

 

표시 값에는 inline-element, block-element 두 가지가 있다.

이 표시값에 따라서 사용할 수 있는 속성 태그가 달라진다.

 

inline-element

• 인라인 요소는 새 줄에서 시작하지 않는다.
• 인라인 요소는 필요한 만큼의 너비만 차지한다.
• 대표적으로 사용되는 요소는 단락의 내부에서 사용되는 <span> 요소
• <span>요소는 텍스트의 일부 또는 문서의 일부를 표시하는 데 사용

참고: 인라인 요소는 블록 수준 요소를 포함할 수 없다!

 

예시> 공간크기로 보는 인라인요소

<p>span 태그는 내부적인 요소로  <span style="border: 1px solid rgb(172, 50, 50)">Hello World</span> 필요한 너비만큼만 작동한다.</p>

span 요소는 인라인 요소로,

새 선에서 시작하지 않고 필요한 만큼의 너비만 차지한다.(빨간박스)

 

block-element

• 블록 수준 요소는 항상 새 줄에서 시작하며 브라우저는 요소 앞과 뒤에 자동으로 약간의 공간(여백)을 추가한다.
• 블록 수준 요소는 항상 사용 가능한 전체 너비를 차지한다(가능한 한 왼쪽과 오른쪽으로 확장됨).
• 대표적으로 사용되는 두 가지 블록 요소는 <p> 및 <div>
• <p>요소는 HTML 문서의 단락을 정의
• <div>요소는 HTML 문서의 구분 또는 섹션을 정의
• vertical-align과 text-align이 작동하지 않는다.

 

예시> 공간크기로 보는 블록요소

<p style="border: 2px solid rgb(92, 46, 199)">Hello World</p>
<div style="border: 2px solid black">Hello World</div>

p(보라색박스)와 div(검정색박스) 요소는 모두 블록 요소이며,

항상 새 선에서 시작하여 사용 가능한 전체 너비를 차지한다(가능한 한 왼쪽과 오른쪽으로 뻗음).

 

 

 

더 많은 inline-element과 block-element를 알고 싶다면

https://www.w3schools.com/html/html_blocks.asp