HTM,CSS

div 태그와 span 태그의 차이점

지니허니 2024. 1. 24. 06:34

DIV태그와 SPAN태그의 정의, DIV태그와 SPAN태그의 차이점에 대해 설명하겠습니다.


div 태그와 span 태그는 HTML에서 레이아웃이나 스타일을 적용하기 위해 사용하는 태그입니다. 이 두 태그는 다음과 같은 차이점이 있습니다.

- div 태그는 **블록(block) 요소**이고, span 태그는 **인라인(inline) 요소**입니다. 블록 요소는 웹브라우저 화면의 가로 한 줄 전체를 차지하고, 줄 바꿈이 일어납니다. 인라인 요소는 텍스트나 이미지와 같은 콘텐츠의 크기만큼만 공간을 차지하고, 줄 바꿈이 일어나지 않습니다.
- div 태그는 **width**와 **height** 속성을 통해 크기를 지정할 수 있습니다. span 태그는 인라인 요소이기 때문에 크기를 지정할 수 없습니다.
- div 태그는 **레이아웃**을 구성하는데 주로 사용되고, span 태그는 **텍스트**에 스타일을 적용하는데 주로 사용됩니다.

 

< span >태그는 폭을 지정하지 않을경우 span태그가 담고 있는 내용만큼만 나타나지만

div태그는 폭이 화면 폭만큼 나타납니다.


<사용예>

< span style="background-color : #CCFFFF" >span태그를 사용한 예< /span >
< div style="background-color:#FFCC66" >div태그를 사용한 예< /div >

 

<결과화면>

위와 같이 span태그는 글자내용까지만 영역이 잡히지만 div태그는 화면 전체영역이 잡힙니다.

 

inline 과 block의 차이
inline속성에 margin,padding top bottom의 적용불가 block 적용가능 뭐 이런것들이 있을수 있겠죠..

 

div는 쉽게 말하면 영역지정태그이지요 

div는 레이아웃을 잡기 위해 사용하시고, span은 텍스트나 이미지등의 컨텐츠를 담는 용도로 사용하시면 맞을듯 하네요^^