1. div 태그와 span 태그

1.1 div 태그

<div> 태그는 division의 약자로, 웹 페이지의 레이아웃을 만들기 위해 콘텐츠를 분할하는 블록 레벨 컨테이너를 나타냅니다.

특징

• 블록 컨테이너 역할
• 웹사이트의 레이아웃을 만들 때 사용
• 영역을 구분 짓거나 무리를 짓는 태그
• 공간을 나누는 것 외에 별다른 기능이 없지만, HTML에서 가장 많이 사용되는 태그 중 하나입니다.

<div style="background-color: antiquewhite">전 div입니다</div>

1.2 span 태그

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

<p>
  이건
  <span style="background-color: red">span</span> 태그입니다.
</p>
<p>
  이런식으로
  <span style="font-weight: bold">사용</span> 합니다.
</p>

2. 블록(Block) 요소

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

블록 요소의 특징

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

<!-- 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>, <span> 등

4. inline-block 요소

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

block / inline / inline-block 총정리