본문 바로가기
HTML CSS JS(프론트엔드)

5. [HTML/CSS] div와 span 차이 (블록 레벨요소,인라인요소)

by 아몰라코딩 2024. 12. 12.

div와 span의 차이점

div 태그

  • 블록(block) 레벨 요소
  • 새로운 줄에서 시작하며, 전체 너비를 차지
  • 주로 레이아웃을 나누거나 콘텐츠를 그룹화할 때 사용
<div>
  이것은 div 태그입니다.
  한 줄 전체를 차지합니다.
</div>

span 태그

  • 인라인(inline) 레벨 요소
  • 텍스트 흐름 내에서 필요한 만큼의 공간만 차지
  • 주로 텍스트의 일부분에 스타일을 적용할 때 사용
이것은 <span style="color: red;">빨간색</span> 텍스트입니다.

주요 차이점

특성 div span

표시 방식 블록 레벨 인라인 레벨
줄바꿈 자동 줄바꿈 줄바꿈 없음
사용 목적 레이아웃 구분 텍스트 일부 스타일링

이러한 차이점을 이해하고 적절한 상황에서 각각의 태그를 사용하는 것이 중요합니다.