[HTML/CSS] div, span태그 차이점

<div>

div태그는 divison의 약자로 뜻 그대로 콘텐츠의 영역을 나누고 레이아웃을 만드는 데 사용합니다. div는 기본 값으로 너비를 100%로 가지는 특징이 있습니다.  높이와 너비를 설정할 수 있지만 행을 혼자서 차지하는 특성을 가져서 여러개를 만들고 너비를 30%씩 지정해도 한 행에 붙는 것이 아닌 30% 너비를 가진 열 형식으로 나열하게 됩니다.

 

30% 너비를 가진 3개의 div태그

See the Pen Untitled by sodium casein (@xyyhsawg-the-selector) on CodePen.

 

 

<span>

span태그는 div태그와 반대로 너비의 기본 값을 가지고 있지 않습니다. 또한 가지려는 특징도 없습니다. 그래서 높이와 너비를 지정해도 적용이 되지 않습니다. 즉, 안의 이미지나 내용에 따라 사이즈가 유동적으로 변합니다. 

span 태그

See the Pen span 예제 by sodium casein (@xyyhsawg-the-selector) on CodePen.

 

 

정리하면 div는 공간을 나눌 때 자주 쓰이고, span태그는 내용의 범위를 가늠할 수 없는 경우에 주로 사용됩니다.

예를 들어서  div태그 안의 텍스트의 일부분을 색깔을 지정해주고 싶을 때 span태그를 사용하는 것이 수월합니다.

<div>안녕하세요<span style="color:blue">000</span>입니다.</div>