[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의 차이점에 대해서 알아보았습니다.