웹 개발을 위한 HTML 가이드 9편 - 공간 할당 태그(div, span)

이전 글까지는 HTML에 대한 기초적인 정보에 대해서 알아봤다면 이번 글부터는 본격적으로 태그들에 대해서 알아보는 시간을 갖도록 할 겁니다. 이번 글에서는 공간을 할당하는 태그인 div태그와 span태그에 대해서 알아볼 예정입니다.

공간을 할당하는 태그

공간을 할당하는 태그에는 두가지가 있습니다. 위에서 이미 언급이 된 div태그와 span태그입니다. 이 두가지 태그는 가장 많이 사용되는 태그라고 생각하는데, 말 그대로 공간을 할당하기 위한 태그입니다. 이 두가지의 태그는 가장 일반적이고 기초적인 태그들이기 때문에 처음으로 배워볼 태그로 결정했습니다.

사실 간간히 이 태그들을 언급하기는 했습니다. 블럭 태그와 인라인 태그를 설명할 때에도 언급을 했었죠. 이를 기억한다면 좋은 거고 그렇지 않다면 태그의 유형 글을 읽고 진행하는 것을 추천드립니다.

여러 개발자들이 공간을 할당하는 태그를 사용하는 주된 목적은 레이아웃을 구성하는 것에 있습니다. 레이아웃을 구성한다는 것은 페이지의 구조를 구성한다는 것입니다. 어떤 항목을 어디에 둘지에 대한 것이죠. HTML에서는 div태그를 통해서 레이아웃을 나눕니다. 경우에 따라서 span태그를 이용하기도 합니다. 그럼 이제 각각의 태그를 살펴보도록 합시다.

div 태그

나누다, 분할하다 라는 의미를 가진 Division의 약자인 div태그는 대표적인 블럭 태그이며 많은 사람들이 특정 공간을 할당할 때에 자주 사용하는 태그입니다. 말 그대로 공간을 할당하는 태그이기 때문에 그것 외에는 별다른 기능은 없습니다. 딱히 의미를 가지는 태그는 아니기 때문에 div태그는 시맨틱 태그가 아니라는 의미가 되겠죠.

<div>
  <!-- 여기에 내용 -->
</div>

div태그는 CSS와 함께 사용할 때에 빛을 발합니다. 어떤 의미를 지닌 것은 아니기 때문에 id속성이나 class속성을 통해서 이름을 붙여줍니다. 어떤 div태그는 이미지를 담기 위해 사용될 수 있고 어떤 div태그는 텍스트를 담기 위해 사용될 수 있기 때문입니다.

<div id="number-box">
  <!-- 여기에 내용 -->
</div>

이런 식으로 말입니다. 위의 div태그의 용도는 숫자를 담아두기 위한 용도일 겁니다. 이름에 그렇게 표시되어 있기 때문이죠. 어떻게 사용될 지는 누가 코드를 작성하느냐에 따라 다르기 때문에 다양한 방법으로 사용되는 태그입니다.

span 태그

범위라는 의미를 가진 단어인 span과 이름이 같은 span태그는 대표적인 인라인 태그입니다. div태그와 마찬가지로 별다른 의미를 갖고 있지는 않으며, 그렇기 때문에 시맨틱 태그가 아닙니다.

span태그는 주로 p태그 내에서 중요한 정보는 아니지만 굵게 하고 싶거나, 다른 색상으로 강조를 하고 싶을 때에 사용합니다. 중요한 내용이라면 em태그나 strong태그를 사용하면 되는데 중요한 내용은 아니지만 기울이고 싶거나 색깔을 바꾸고 싶다면 그 때에 span태그를 사용하면 되겠습니다. 물론 CSS를 활용해야하겠죠!

<p>span 태그는 <span class="red">이런식</span>으로 사용한다.</p>

다음 파트에서 p태그를 배우게 될테니 지금은 몰라도 좋습니다. em태그나 strong태그도 마찬가지입니다. 지금의 내용을 기억해뒀다가 나중에 다음 파트들에서 생각만 나도 성공입니다.

이번 글에서는 div태그와 span태그에 대해서 알아봤습니다. 한 번 오늘 배운 이 두가지의 태그를 만지면서 연습해보면 좋을 것 같습니다. 이번 글은 여기까지 입니다. 다음 글은 제목 태그에 대해서 알아볼 예정입니다. 그럼 다음 글에서 봅시다.