[HTML , CSS ] span , div 태그의 차이

안녕하세요!

오늘은 HTML 태그에서 많이 쓰이는 div 와 span의 차이에 대해서 알아보겠습니다.

 

* div 와 span의 공통점 : 특정영역에 스타일을 주는 태그

 

* 스타일을 지정할때 inline 과 block 두가지방식이 있습니다.

1. 문자의 일부분만 선택지정(inline)

2. 넓은 범위를 묶어서 지정(block)

 

* inline 요소 : <span><b><a><img>

* block 요소 : <p><div><ol><ul><table>

 

즉 span 과 div 의 차이점은

문자열을 선택해서 지정할때는 span

비교적 넓은 범위에 지정할때는 div를 

사용합니다. 

 

예를 들어서 span은 문자열에서 원하는 부분만 선택해서 색을 바꾸는 등 스타일을 지정해 줄 수 있습니다.

 

<span class="hi">안녕</span>하세요 (입력)

-> 안녕하세요 (출력)

 

** span 으로 묶어준 안녕만 다른 색상으로 스타일 적용이 가능합니다.

 

div는 문자열이 아닌 태그로 묶인 형태로 스타일을 지정할 때 사용합니다.

 

(입력)

<div class="hi"> 

<p>가</p>

<p>나</p>

<p>다</p>

</div>

 

div와 p는 block요소로 브라우저 너비 100%를 가져가기때문에 마치 블록처럼 쌓입니다.

 

(출력)

가                                                                                                         

나                                                                                                         

다                                                                                                         

 

 

여기까지 span 과 div의 차이점에 대해서 알아보았습니다.