✦ 컨테이너 요소

주로 웹 페이지의 영역을 구분하기 위해 사용되는 요소들을 의미한다.
컨테이너에는 div 태그와 span 태그가 존재하며, 이 두 개의 태그는 아무 의미 없는 ‘순수’ 컨테이너다.

주의해야 할 점은 의미 있는 컨테이너 요소(시멘틱 웹 태그)를 두 개의 태그 내부에서 사용하면 안 된다.

div 태그

콘텐츠 분할을 위한 요소이며 레이아웃을 구성할 때 사용한다. 이 태그는 다양한 요소를 묶어서 하나의 요소로 표현할 수 있는 장점을 가지고 있다.

<div>
  <p>요소1</p>
  <ul>
    <li>1</li>
    <li>2</li>
   <ul>
</div>

span 태그

구문 콘텐츠를 분할하기 위한 인라인 요소이다. 인라인 요소이기 때문에 그룹화나 스타일을 적용할 때 유용하게 사용된다.

<p>
  <span class="name">span 요소</span>는 이렇게<span class="des">효과를 주기위해 사용</span>합니다.
</p>