import {
  A, Bold, Details, Dl, H, Message, NoteBottom, NoteTop, P,
  Quote, Score, Youtube, Ul, Ol, Em, Gray, Code, Kbd, Image,
  Q, Strong, Spoiler, Strike, Line, Mark, HtmlGuideMessage, Name,
  Dt, Dd
} from '@/components/Post';

<HtmlGuideMessage/>

이전 글까지는 HTML에 대한 기초적인 정보에 대해서 알아봤다면 이번 글부터는 본격적으로 태그들에 대해서 알아보는 시간을 갖도록 할 겁니다. 이번 글에서는 공간을 할당하는 태그인 `div`태그와 `span`태그에 대해서 알아볼 예정입니다.

# 공간을 할당하는 태그
<P><Bold>공간을 할당하는 태그에는 <Strong>두가지</Strong></Bold>가 있습니다. 위에서 이미 언급이 된 <Code>div</Code>태그와 <Code>span</Code>태그입니다. 이 두가지 태그는 가장 많이 사용되는 태그라고 생각하는데, <Strong>말 그대로 공간을 할당하기 위한 태그</Strong>입니다. 이 두가지의 태그는 가장 일반적이고 기초적인 태그들이기 때문에 처음으로 배워볼 태그로 결정했습니다.</P>

사실 간간히 이 태그들을 언급하기는 했습니다. 블럭 태그와 인라인 태그를 설명할 때에도 언급을 했었죠. 이를 기억한다면 좋은 거고 그렇지 않다면 [태그의 유형](/post/2021-05-08-01-html-block-inline-tag) 글을 읽고 진행하는 것을 추천드립니다.

여러 개발자들이 공간을 할당하는 태그를 사용하는 주된 목적은 **레이아웃을 구성하는 것**에 있습니다. 레이아웃을 구성한다는 것은 **페이지의 구조를 구성한다는 것**입니다. 어떤 항목을 어디에 둘지에 대한 것이죠. HTML에서는 `div`태그를 통해서 레이아웃을 나눕니다. 경우에 따라서 `span`태그를 이용하기도 합니다. 그럼 이제 각각의 태그를 살펴보도록 합시다.

## div 태그
나누다, 분할하다 라는 의미를 가진 **Division**의 약자인 `div`태그는 대표적인 **블럭 태그**이며 많은 사람들이 특정 공간을 할당할 때에 자주 사용하는 태그입니다. 말 그대로 공간을 할당하는 태그이기 때문에 그것 외에는 별다른 기능은 없습니다. 딱히 의미를 가지는 태그는 아니기 때문에 `div`태그는 시맨틱 태그가 아니라는 의미가 되겠죠.

```html
<div>
  
</div>
```

`div`태그는 **CSS**와 함께 사용할 때에 빛을 발합니다. 어떤 의미를 지닌 것은 아니기 때문에 `id`속성이나 `class`속성을 통해서 이름을 붙여줍니다. 어떤 `div`태그는 이미지를 담기 위해 사용될 수 있고 어떤 `div`태그는 텍스트를 담기 위해 사용될 수 있기 때문입니다.

```html
<div id="number-box">
  
</div>
```

이런 식으로 말입니다. 위의 `div`태그의 용도는 숫자를 담아두기 위한 용도일 겁니다. 이름에 그렇게 표시되어 있기 때문이죠. 어떻게 사용될 지는 누가 코드를 작성하느냐에 따라 다르기 때문에 다양한 방법으로 사용되는 태그입니다.

## span 태그
범위라는 의미를 가진 단어인 <Bold>span</Bold>과 이름이 같은 `span`태그는 대표적인 인라인 태그입니다. `div`태그와 마찬가지로 별다른 의미를 갖고 있지는 않으며, 그렇기 때문에 시맨틱 태그가 아닙니다.

`span`태그는 주로 `p`태그 내에서 중요한 정보는 아니지만 굵게 하고 싶거나, 다른 색상으로 강조를 하고 싶을 때에 사용합니다. 중요한 내용이라면 `em`태그나 `strong`태그를 사용하면 되는데 중요한 내용은 아니지만 기울이고 싶거나 색깔을 바꾸고 싶다면 그 때에 `span`태그를 사용하면 되겠습니다. 물론 **CSS**를 활용해야하겠죠!

```html
<p>span 태그는 <span class="red">이런식</span>으로 사용한다.</p>
```

다음 파트에서 `p`태그를 배우게 될테니 지금은 몰라도 좋습니다. `em`태그나 `strong`태그도 마찬가지입니다. 지금의 내용을 기억해뒀다가 나중에 다음 파트들에서 생각만 나도 성공입니다.

<Line />

이번 글에서는 `div`태그와 `span`태그에 대해서 알아봤습니다. 한 번 오늘 배운 이 두가지의 태그를 만지면서 연습해보면 좋을 것 같습니다. 이번 글은 여기까지 입니다. 다음 글은 제목 태그에 대해서 알아볼 예정입니다. 그럼 다음 글에서 봅시다.

이전 글까지는 HTML에 대한 기초적인 정보에 대해서 알아봤다면 이번 글부터는 본격적으로 태그들에 대해서 알아보는 시간을 갖도록 할 겁니다. 이번 글에서는 공간을 할당하는 태그인 div 태그와 span 태그에 대해서 알아볼 예정입니다. 공간을 할당하는 태그에는 두가지가 있습니다. 위에서 이미 언급이 된 div 태그와 span 태그입니다. 이 두가지 태그는 가장 많이 사용되는 태그라고 생각하는데, 말 그대로 공간을 할당하기 위한 태그입니다. 이 두가지의 태그는 가장 일반적이고 기초적인 태그들이기 때문에 처음으로 배워볼 태그로 결정했습니다.

“ span ” 태그 관련 포스트 1건

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