<span>과 <div> 차이

<span>과 <div>는 HTML에서 요소를 그룹화하거나 스타일링하기 위해 사용되는 두 가지 다른 태그입니다. 그들의 주요 차이는 다음과 같습니다:

1. 블록 레벨 요소 vs 인라인 요소:
   • <div>는 "블록 레벨 요소"로 분류됩니다. 이는 <div>가 새로운 줄에서 시작하며, 가능한 전체 가로 폭을 차지하려고 한다는 것을 의미합니다. 따라서 일반적으로 레이아웃의 큰 구획을 형성하는 데 사용됩니다.
   • <span>은 "인라인 요소"로 분류됩니다. 이는 <span>이 새로운 줄에서 시작하지 않으며, 내용의 너비만큼만 공간을 차지한다는 것을 의미합니다. 주로 텍스트 내부의 작은 부분을 스타일링하거나 구분하기 위해 사용됩니다.
2. 기본 사용 목적:
   • <div>는 다른 HTML 요소들을 그룹화하고 레이아웃을 구성하는 데 사용됩니다. 예를 들어, 웹사이트의 헤더, 바디, 푸터 등을 구분할 때 사용할 수 있습니다.
   • <span>은 텍스트나 이미지 같은 인라인 요소에 스타일을 적용하거나, 문서 내에서 특정 부분을 강조하기 위해 사용됩니다. CSS를 이용하여 글자의 색상을 바꾸거나 배경을 추가하는 등의 작은 변경에 주로 사용됩니다.
3. 스타일링과 레이아웃의 영향:
   • <div>에 스타일을 적용할 때는 보통 너비(width), 높이(height), 여백(margin), 패딩(padding) 등을 설정하여 페이지 레이아웃을 조정합니다.
   • <span>에 스타일을 적용할 때는 글자 크기(font size), 글자 색상(color), 배경색(background color) 등 텍스트 관련 속성을 변경하는 데 초점을 맞춥니다.

결론적으로, <div>와 <span>의 주된 차이는 그들이 HTML 문서 내에서 차지하는 공간과 그들이 사용되는 문맥입니다. <div>는 보다 큰 블록을 형성하고 페이지 레이아웃을 정의하는 데 사용되며, <span>은 보다 세부적인 스타일링을 위해 사용되는 인라인 요소입니다.