WeniVooks

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

• 블록 레벨과 인라인 요소의 분류는 HTML 명세 4.01까지 사용되었습니다.
• 현재 표준 HTML에서는 콘텐츠 카테고리 집합으로 대체되었습니다

1. <div> 태그와 <span>태그

1.1 <div>

<div> 태그는 division의 약자로, 웹 페이지의 레이아웃을 만들기 위해 콘텐츠를 분할하는 블록 레벨 컨테이너를 나타냅니다. 이 태그는 영역을 구분 짓거나 무리를 지을 때 사용되며, 매우 광범위하게 사용됩니다.

• 블록 컨테이너
• 분할이라는 뜻을 가진 division을 축약한 것으로 웹사이트의 레이아웃을 만들 때 사용.
• 영역을 구분 짓거나 무리를 짓는 태그, 상당히 광범위하게 사용.
• 공간을 나누는 것 외에 별다른 기능이 없음. 정리를 도와주는 역할 뿐이지만 HTML에 가장 큰 도움을 주며 많이 사용됩니다. (시맨틱 태그가 많이 사용되긴 하지만) 여전히 많이 사용됩니다.

1.2 <span>

<span> 태그는 인라인 컨테이너로, 스타일을 적용하거나 인라인 요소를 묶는 데 사용됩니다. 본질적으로는 아무런 의미를 나타내지 않지만, 특정 텍스트나 인라인 요소에 CSS 스타일을 적용할 때 유용합니다.

2. block 요소

블록 요소는 부모 요소의 전체 공간을 차지하여 블록을 만드는 HTML 요소입니다. 이러한 요소는 항상 새로운 줄에서 시작하고, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

• 부모 요소의 전체 공간을 차지하여 블록을 만듭니다.
• 언제나 새로운 줄에서 시작, 좌우 양측으로 최대한 늘어나 가능한 모든 너비를 차지합니다.
• 이전 이후 요소 사이에 줄 바꿈이 일어납니다
• 페이지의 구조적 요소를 나타날 때 사용합니다
• 블록요소는 인라인 요소 안에 중첩 될 수 없지만, 인라인 요소는 블록 요소 안에 중첩 될 수 있습니다

<!-- O -->
<div>
  블록요소 안
  <span>인라인요소 중첩 가능</span>
</div>
 
<!-- X -->
<span>
  인라인요소 안
  <div>블록요소 중첩 불가능</div>
</span>

<!-- O -->
<div>
  블록요소 안
  <span>인라인요소 중첩 가능</span>
</div>
 
<!-- X -->
<span>
  인라인요소 안
  <div>블록요소 중첩 불가능</div>
</span>

• width, height 크기를 지정할 수 있고, padding, border, margin 속성을 사용할 수 있습니다.
• 블록 요소는 웹 페이지의 구조를 정의하는 데 매우 중요하며, 시각적 레이아웃을 구성하는 기본 단위로 사용됩니다. 대표적인 블록 요소로는 <div>, <p>, <h1>부터 <h6>, <header>, <footer>, <section>, <article>, <nav> 등이 있습니다.

3. inline 요소

인라인 요소는 항상 블록 레벨 요소 내에 포함되며, 콘텐츠의 흐름을 끊지 않고, 컨텐츠에 따라 할당된 공간만 차지합니다. 문장이나 단어 같은 작은 부분에 대해 적용되며, 새로운 줄을 만들지 않습니다.

• 항상 블록 레벨 요소 내에 포함됩니다.
• 콘텐츠의 흐름을 끊지 않으며, 컨텐츠에 따라 할당된 공간만 차지합니다.
• 문장, 단어 같은 작은 부분에 대해서 적용됩니다.
• 새로운 줄을 만들지 않습니다.
• width, height 크기를 지정할 수 없고, padding, border, margin 속성을 사용할 수 있지만, 상하 margin 속성은 사용할 수 없습니다!
• 대표적인 인라인 요소로는 <a>, <em>, <strong> 등이 있습니다.

4. inline-block 요소

• 기본적으로 인라인 요소의 속성을 따르면서 너비와 높이를 조절할 수 있습니다
  • 인라인 요소처럼 전후 줄바꿈 없이 한 줄에 다른 요소들과 나란히 배치
  • 블록 요소처럼 너비와 높이 지정 및 margin, padding 상하 간격 지정 가능
• button, input, select

block / inline / inline-block 총정리