[HTML] 공간 분할 태그, 레이어 나누기 div와 span

이번 포스트는 html의 공간 분할에 대해서 알아보겠습니다. 왜 굳이 레이어를 나누나 싶겠지만 레이어를 나누면 코드 안의 수 많은 html태그들을 나눠서 관리하기도 쉽고 어느 태그들이 어느 영역에 속하는지 구분하기 쉽기 때문입니다. 간단히 말하자면 서랍장을 용도별로 나누어서 정리하는 것과 같은 이치라고 생각하시면 됩니다.

 

이러한 레이어를 나누는 태그는 두 가지가 있습니다. <div>와 <span>입니다. 왜 같은 역할을 하는 태그가 두개가 있냐면 <div>는 블록 레벨의 요소이고, <span>은 인라인 레벨의 요소이기 때문입니다. 블록레벨과 인라인요소에 대한 설명은 아래 포스트를 참조해 주세요.

https://bamtory29.tistory.com/4

[HTML/CSS] 블록 요소와 인라인 요소

 

 

보이듯이 div는 한 블럭(줄)을 차지하고 span은 한 요소의 크기를 갖고있음을 볼 수 있습니다. 그래서 div태그의 속성에는 width와 height같은 속성이 들어올 수 있지만 인라인 요소인 span에는 적용되지 않는다는 차이점 또한 가지고 있습니다.