HTML CSS 공간분할태그 (div, span) 알아보기 - 심코딩

오늘은 간단한 포스팅을 하나 해보려 한다. 

 

우리가 홈페이지를 만들 때 중간 공간을 분할을 하려면 공간분할태그를 사용을 하여야 한다. 이러한 공간 분할 태그에는 크게 div와 span이 있다. 나도 오늘 공부하기 전까진 뭐가 다른지 몰랐으나 알게되어서 포스팅을 하려한다.

 

 

div 태그

 

div 태그는 <div>와 </div> 사이 외에도, 그 줄 전체를 모두 해당 태그가 차지를 한다. 이것을 Block이라고 표현을 한다.

<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>
<div>Block</div>

 

이렇게 코드를 입력 후 실행을 하면 아래와 같이 나오는 것을 볼 수 있다.

 

span 태그

 

반대로 span 태그는 딱 태그 된 그 영역만 차지를 한다. 이것을 inline 이라고 표현을 한다. 앞서 말한 글자 관련 태그들 (a태그, b태그, i태그 등등) 은 모두 inline 에 속한다. 글자 관련 기본 태그를 모른다면 아래 포스팅을 참고하자.

 

HTML, CSS 기본 글자 태그 알아보기! (a태그, a href ...)

 

span 태그를 이용하여 아래와 같이 코드를 입력하면 앞선 div와는 다른 결과를 도출해낸다.

 

<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>
<span>Inline</span>

 

아래 이미지와 같이 공간분할을 했었어도 줄이 구분되지는 않고 쭉 이어져 나오는 것을 볼 수 있다.

 

오늘은 이렇게 같은듯 다른 div 태그와 span 태그에 대해 알아보았다.