프로그래밍/HTML

HTML - div와 span 태그의 차이점

가카리 2013. 12. 15. 21:37
반응형

일단 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

반응형