[ 영역을 구분하는 태그 ]

<div>

• 줄 바꿈이 적용되어 이미 존재하는 태그의 다음 줄에 영역이 설정 됨(블럭요소)

<div style="width:100px;height:100px;">첫 번째 영역</div>
<div style="width:100px;height:100px;">두 번째 영역</div>
<div style="width:100px;height:100px;">세 번째 영역</div>

• div 태그는 가로로 쭉 늘어진 블록 요소이기 때문에 속성을 통해 크기 설정이 필요하다.
  • border→ 테투리 두께
  • background → 배경색
  • width, height → 가로와 세로 크기 할당(픽셀 기준)

<span>

• 줄 바꿈이 적용되지 않아 옆으로 영역이 붙음(인라인요소)

<span>첫 번째 영역</span>
<span>두 번째 영역</span>
<span>세 번째 영역</span>

→ 인라인 형식으로 공간을 분할하여 수평으로 공간이 분할된다.