[HTML] <div> 태그와 <span> 태그의 차이는?

 

<div> 태그와 <span> 태그의 차이

 

예전에 HTML을 공부하면서, div와 span의 차이에 대해서 개념을 제대로 이해하지 못하던 시기가 있었습니다. 지금 돌아보면 진짜 별것도 아닌 내용인데 말입니다. 그냥 문득 그 때가 생각이 나서 조금 기록을 해봅니다.

 

 

HTML 학습요령

 

HTML 학습에만 해당하는 내용은 아닐 것 같은데요, 저는 일단 비슷한 녀석들이 눈에 띄이면 '어떻게 서로 다른가?'라는 측면으로 비교해두는 편입니다. 머리가 나빠서 그런지 그런 임팩트를 줘야 이해가 쉽고, 기억에 남더군요.

 

그래서 div와 span 태그의 경우에도 이해가 되지 않던 개념을, 상호 비교를 통해 비로소 명확하게 이해를 할 수 있게 된 것 같습니다.(머리가 정말 나빠요...ㅜ.ㅜ)

 

div : division, '구분, 구역' 정도의 의미로 사용되고

span : span, '폭(한뼘 정도의)' 정도의 의미로 사용된다고 이해두면 좋을 것 같습니다.

 

 

 

Block 요소 vs. Inline 요소

 

블록요소

 

HTML의 요소(Element)들은 블록 성질을 가진 것과, 인라인 성질을 가진 것들로 구성됩니다.

블록 요소인지, 인라인 요소인지를 공부할 때는 CSS로 Background 색상을 주면서 확인해보는 게 요령입니다.

 

예를 들어 블록 성질을 가진, HTML 요소들은 아래와 같이 브라우저에 표시됩니다.

<h1 class="block-type">헤딩은 블록요소</h1>
<h2 class="block-type">블록요소는 우측에 공간이 남아도</h2>
<h3 class="block-type">블록 쌓듯 줄바꿈 됩니다.</h3>

<style>
    .block-type {
    background-color: #eee;
    }
</style>

블록요소는 벽돌쌓기처럼 브라우저에 표시됩니다.

 

 

 

 

<p class="block-type">p(paragraph)도 블록요소.</p>
<p class="block-type">
    p에 글자를 많이 넣으면 대략 이런 모습. Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam eius distinctio, laboriosam sit nobis voluptate, in explicabo enim iste tempore libero numquam provident quidem culpa similique eum, eveniet sequi nulla. Lorem ipsum dolor sit amet consectetur
    adipisicing elit. Tempora eius sed voluptas fugiat sit? Ea deserunt fugit impedit, magnam doloribus alias quas voluptates ex doloremque qui numquam explicabo temporibus maiores!
</p>

<style>
    .block-type {
    background-color: skyblue;
    }
</style>

p 엘리먼트를 이용해서 블록요소 특징을 살펴봅니다

 

 

인라인 요소

 

 

<a href="https://google.com" class="inline-type">a(anchor)는 블록요소</a>
<a href="https://naver.com" class="inline-type">딱 자기 좌우폭 크기 만큼만</a>
<a href="https://daum.net" class="inline-type">자리를 차지합니다</a>
<a href="https://kincoding.com" class="inline-type">그리고 줄바꿈 없이 옆으로 계속 붙어요.</a>

<style>
    .inline-type {
    background-color: yellow;
    }
</style>

인라인 요소는 줄바꿈이 없습니다

 

 

블록요소는 인라인 요소를 안에 품을 수 있습니다(nest). 즉, 인라인 요소는 블록요소 안에서 사용할 수 있다는 것이죠. 그 반대의 경우는 불가능합니다.

 

<p class="block-type">p(paragraph)도 블록요소.</p>
<p class="block-type">
    <a href="https://google.com" class="inline-type">클릭하면 구글로 이동</a> Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam eius distinctio, laboriosam sit nobis voluptate, in explicabo enim iste tempore libero numquam provident quidem culpa similique eum, eveniet sequi nulla.
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora eius sed voluptas fugiat sit? Ea deserunt fugit impedit, magnam doloribus alias quas voluptates ex doloremque qui numquam explicabo temporibus maiores!
</p>

<style>
    .block-type {
        background-color: skyblue;
    }
    .inline-type {
    background-color: yellow;
</style>

블록요소는 인라인요소를 품을 수 있습니다

 

 

 

다시  div와 span으로 돌아와서

 

div는 아무 동작, 기능 없이 그냥 블록 단위로 HTML 엘리먼트들을 "의미론적으로", 그리고 "블록요소의 성질로" 그루핑 해서 묶어주는 역할을 합니다. 

 

span도 궁극적으로 div와 역할이 같습니다. 다만, in-line 요소처럼 사용한다는 것이 차이죠.

 

div나, span이나 스타일(CSS)를 주지 않으면 웹문서에는 아~무런 영향을 미치지 않습니다. 무형, 무취, 무색의 성질(?)을 가집니다. 눈에 보이지도 않고 동작을 하지도 않는데도 이 태그들은 왜 존재하는 것일까요?

 

무형, 무색, 무취가 기본이지만, 해당 div나 span에 class나 id를 부여해서 멋지게 스타일을 컨트롤할 수도 있고, Javascript로 특영 구역(div) 또는 특정 폭(span) 만큼만 컨트롤 할 수 있다는 잇점이 존재하게 되기 때문입니다.

 

 

 

마치며

 

 

그래서 오늘의 결론, div와 span은 결국 같은 목적으로 만들어졌다.

다만, 쓰임새가 블록 요소와 인라인 요소로 다를 뿐이다.

 

 

 

즐거운 코딩생활, 즐코딩

KINcoding.