[HTML] HTML5 div와 span 태그 구분

작게 미니 프로젝트를 할 때 페이지의 레이아웃을 구성하면서 잠시 혼란이 왔다.

div 태그를 쓰긴 쓰는데 대충 감으로 div를 추가하고 있는 나 자신을 발견했다.

정확히 공간을 얼마나 차지하는 지도 모르고 말이다.

css를 편하게 하기 위해서 HTML 공간 분할 태그들을 정확히 인지하고 사용하는 게 중요하다는 것을 느꼈다.

 

이번 포스팅에서는 HTML의 공간 분할 태그인 div와 span을 정리해볼까 한다.

직접 코드와 결과화면을 그려서 비교해보았다.

 

div 태그(블록 형식)	span 태그(인라인 형식)

 

 

div 태그는 한 행을 차지하고, span 태그는 입력된 글자의 수만큼 공간을 차지하는 것을 알 수 있다.

이제 div와 span의 쓰임을 제대로 구분하고 코딩해보자.

 

 

참고로,

div 태그처럼 블록 형식인 태그는 h1-h6태그나 p 태그도 있다.

그리고, span 태그와 마찬가지로 a태그 혹은 input 태그 등도 인라인 형식의 태그이다.