대표적인 인라인 요소 - span - by. UXKM

span과 div의 차이

<span>과 <divn>는 HTML에서 요소를 그룹화하거나 스타일을 적용하기 위해 사용되는 두 가지 기본적인 요소입니다.
이 두 요소는 몇 가지 중요한 차이점이 있습니다.

1. 요소 유형
   • <span> : 인라인 요소 (Inline Element)
   • <div> : 블록 요소 (Block Element)
2. 디스플레이 스타일
   • <span> : display: inline
   • <div> : display: block
3. 레이아웃
   • <span> :
     다른 인라인 요소들과 같은 줄에 위치
     콘텐츠의 너비만 차지하며, 블록 레벨 요소처럼 줄바꿈을 일으키지 않음
     

     중요 : <span> 요소를 레이아웃을 구성하는 용도로 사용하지 마세요!

   • <div> :
     항상 새로운 줄에서 시작
     가로 방향으로 전체 너비를 차지
4. 주요 용도
   • <span> :
     텍스트의 일부분을 스타일링하거나 특정 부분을 그룹화
     예를 들어, 특정 단어를 강조하거나 색상을 변경할 때 사용
   • <div> :
     문서의 큰 부분을 그룹화하거나 레이아웃 구성
     예를 들어, 섹션, 컨테이너, 페이지 레이아웃 구성 시 사용

span 요소의 주요 용도