# 컨테이너 요소

* HTML 요소를 묶어주는 컨테이너(Container) 요소
* 아무런 의미(Semantic)는 가지지 않는다.
* 해당 요소들은 적절한 시멘틱 요소가 없을 때 사용해야 한다.

## **\<div>**

* **\<div> 디비전(Divsion) 요소**
* 블록(block) 컨테이너(감싼다는 의미)
* 단락이나 섹션 등 특정 범위를 묶는 용도로 사용

```markup
<div class="division"></div>
```

## **\<span>**

* **\<span> 스펜(Span) 요소**
* 인라인(inline) 요소
* 인라인 요소들(a, strong, em, b, i 등)을 감쌀 때 사용
* 블록 요소들(h1-6, p, blockquote, section 등)을 감쌀 수 없다.
* 숨김 텍스트를 마크업할 때 많이 사용한다.

```markup
<h2>
  SIX
  <span class="green ">C</span>
  <span class="yellow">O</span>
  <span class="orange">L</span>
  <span class="red   ">O</span>
  <span class="violet">R</span>
  <span class="blue  ">S</span>
</h2>
```