[HTML/CSS] div와 span의 차이

 

<div>와 <span>의 차이

 

 

div와 span은 HTML에서 내용을 묶거나 스타일을 적용하기 위해 사용하는 태그입니다.

하지만 두 태그의 역할과 사용 방법이 다릅니다.

 

1. 기본 차이점 

	<div>	<span>
역할	블록 요소 (Block-level Element)	인라인 요소 (Inline Element)
사용 용도	주로 레이아웃 구성 및 큰 덩어리 묶음	텍스트 내부 또는 작은 부분 스타일 적용
디스플레이 특성	한 줄 전체를 차지하며 줄 바꿈 발생	줄 바꿈 없이 콘텐츠 주변에만 적용
CSS 적용	width, height, margin, padding 등 적용 가능	width, height 적용 불가, margin, padding 일부 제한

 

2. div 태그

• 블록(Block-level) 요소로 한 줄 전체를 차지합니다.
• 자동으로 줄 바꿈이 되어 다음 요소는 아래쪽에 배치됩니다.
• 주로 레이아웃을 구성하거나 큰 덩어리를 묶을 때 사용합니다.
• width, height, margin, padding 등 모든 CSS 속성 적용이 가능합니다.

  예제  

 

<div class="container">
    <div class="box">첫 번째 박스</div>
    <div class="box">두 번째 박스</div>
</div>

.container {
     background-color: lightgray;
     padding: 10px;
}
.box {
     background-color: lightblue;
     padding: 20px;
     margin-bottom: 10px;
     width: 200px;
}

 

 

• div는 한 줄 전체를 차지하며, 박스들이 아래로 쌓입니다.
• width, padding, margin이 정상 적용됩니다.

 

3. span 태그

• 인라인(Inline) 요소로 줄 바꿈 없이 내용 주변에만 적용됩니다.
• 주로 텍스트의 일부 또는 작은 부분에 스타일을 적용하거나 특정 부분만 감쌀 때 사용합니다.
• width, height 적용 불가, padding, margin은 좌우에만 적용 가능하며, 상하 간격은 적용되지 않습니다.

  예제  

 

<p>이 문장에는 <span class="highlight">강조된 부분</span>이 있습니다.</p>
<p>span은 인라인 요소이므로 <span class="highlight">줄 바꿈 없이</span> 계속 이어집니다.</p

.highlight {
     color: red;
     background-color: yellow;
     padding: 5px;
     border-radius: 3px;
}

 

 

• span은 줄 바꿈 없이 텍스트 내부에 삽입됩니다.
• padding이 적용되지만 width, height는 적용되지 않습니다.

 

4. 정리

• div는 블록 요소로 레이아웃을 구성하거나 큰 덩어리를 묶을 때 사용합니다.
• span은 인라인 요소로 텍스트 내부에서 작은 부분을 스타일링할 때 사용합니다.
• div는 줄 바꿈이 발생하고 한 줄 전체를 차지하지만, span은 줄 바꿈 없이 내용을 감쌉니다.
• div는 모든 CSS 속성이 적용되지만, span은 width, height가 적용되지 않고 padding, margin도 제한적으로 적용됩니다.

 

5. 언제 사용해야 할까?

• div 사용 시점:
  • 레이아웃 구성 (섹션, 컨테이너, 카드 등)
  • 큰 덩어리를 묶어야 할 때 (예: 전체 콘텐츠 블록)
  • CSS Flexbox 또는 Grid 레이아웃 사용 시
• span 사용 시점:
  • 텍스트 내부에서 특정 부분만 스타일링할 때 (예: 강조 표시, 색상 변경)
  • 인라인 요소와 함께 사용할 때 (예: 링크, 문장 중간)