HTML - div와 span 태그의 차이점

일단 div와 span 태그의 차이점을 알아보시죠.

 

div	block 형식으로 공간 분할
span	inline 형식으로 공간 분할

 

block과 inline이 뭔지도 모르실 분들이 많을텐데요.

한번 직접 보고 확인해보세요.

div태그부터 시작하겠습니다.

http://kurien.tistory.com

 

http://kurien.tistory.com

 

http://kurien.tistory.com

 

<div style="background-color:red;">http://kurien.tistory.com</div>

<div style="background-color:red;">http://kurien.tistory.com</div>

<div style="background-color:red;">http://kurien.tistory.com</div>

어떤식으로 나오는지 확인시켜드리기 위해서 일부러 배경색을 넣었습니다.

먼저 div는 기본적으로 width=100%로 나오구요.

물론 설정으로 조절이 가능합니다.

block태그는 이러게 하나하나씩 쌓아 올려지는 형식입니다.

그럼 span태그를 보시죠.

http://kurien.tistory.com http://kurien.tistory.com http://kurien.tistory.com

<span style="background-color:red;">http://kurien.tistory.com</span>

<span style="background-color:red;">http://kurien.tistory.com</span>

<span style="background-color:red;">http://kurien.tistory.com</span>

inline 형식은 글자가 한 줄에 차례차례 들어가는 형식입니다.

이렇게 div태그와 span태그를 알아봤는데요,

이 태그만으로 할 수 있는건 그렇게 많지가 않습니다.

제가 위에 설명하면서 적어놓은 style="background-color:red;"부분이 바로 CSS인데요.

저런 효과가 추가 됐을 때 비로소 공간 분할 태그의 쓰임새가 다양해지는 것 같습니다.

정말 중요한 태그니 꼭 알아두세요!

 

출처 : http://kurien.tistory.com/83