[TIL] HTML ㅡ div / span 태그의 차이점

 

 

특정 구역이나 구획을 분할해주는 <div> & <span> 태그 !

두 태그가 HTML 내에서 비슷한 역할을 한다 

 

의미가 없는 태그이기 때문에 nav, article등이 아닐 때.. 무언가 적절한 태그를 주기 어려울 때 이 의미 없는 두가지 태그를 보통 많이 사용한다 

또한 그룹화를 위해 사용하며, 스타일링 (css)을 일관적으로 적용하려는 목적이 큰 태그들이다 

 

 

그렇다묜 두 태그의 차이점은 무엇일까? 

 

<div> 는 "블럭요소"

<span> 은 "인라인요소"

 

 

 

아래화면을 보시면 이해가 더 쉽습니당

 

핑크색 부분은 div 태그를 사용한 것이라 박스 형태로 영역이 설정되어 있고 그 안에 문장들이 배열된다

하늘색 부분은 span 태그를 사용한 것이라 줄 단위로, 개별적으로 영역이 설정되어 있다 때부분 텍스트를 꾸밀 땐 span으로 묶어서 사용해 준답니다 

 

 

 

div / span 쓰임새는 갖지만 각 태그의 속성이 다르기 때문에 적절하게 사용해 주는 것이 중요하고,

의미없는 태그이지만 남발하면 안된다는 것.. 진정 의미가 없다고 판단 될 때만 사용해야 한답니다