[HTML] <div>와 <span> 태그의 차이

 

 

<div>와 <span> 태그를 비교하기 전 알아둘 것

웹사이트를 만들기 전 영역을 설정할 필요가 있습니다.

웹 페이지의 레이아웃을 구성할 때 div와 span은 없어서는 안 될 태그입니다.

 

 

<div> 태그

html안에 존재하는 여러 개의 태그들을 <div>라는 하나의 큰 단위로 묶어줍니다.

큰 단위인 <div>로 묶어준다면 나중에 css로 작업할 때 div안에 있는 요소들에게 동일한 명령을 줄 수가 있습니다.

단, div 태그 자체로는 시각적인 변화를 나타낼 수는 없습니다.

그리고 <div> 태그는 블록 레벨 요소입니다.

 

* 블록 레벨 요소란?

부모 요소의 전체 공간을 차지하여 블록을 만드는 것

항상 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

 

 

<span> 태그

<span> 태그 역시 <div> 태그와 마찬가지로 여러 개의 태그들을

<span>이라는 하나의 큰 단위로 묶어주는 역할을 합니다.

그럼 <div> 태그와 마찬가지로 css로 작업할 때 동일한 명령을 줄 수 있고

또한, 시각적인 변화를 나타낼 수 없겠죠.

하지만 <span> 태그는 <div> 태그와 달리 인라인 요소라서 자신의 공간만 차지합니다.

 

* 인라인 요소란?

콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.

새로운 줄을 만들지 않으며 필요한 너비만 차지합니다.

 

 

<div>와 <span> 비교 분석

 

CSS 코드

.highlight {
  background-color: #045fd4;
}

 

<div>를 사용한 코드

<div>div는 <div class="highlight">블록 레벨 요소 </div>입니다.</div>

 

결과

div는

블록 레벨 요소                                                                              

입니다.

 

<span>을 사용한 코드

<div>span은 <span class="highlight">인라인 요소 </span>입니다.</div>

 

결과

span은 인라인 요소 입니다.

 

 

확실한 차이를 아시겠나요?

div는 전체 문단이 끊기고, 하나의 문단을 전부 차지합니다.

span은 전체 문단이 끊기지 않고 필요한 부분만 차지합니다.

이와 별개로 <p> 태그는 div태그와 같이 블록 레벨 요소이고, 상하 margin을 갖습니다.