Div 와 Span 태그

* 테이블은 셀과 셀의 공간을 묶어 놓은 집합체이면 Div 와 Span 은 그 각각이 하나의 공간으로 이루워집니다. 테이블에서는 셀의 크기를 먼저 계산한 후 보여지고 Div 와 Span 는 바로 보여지기때문에 렌더링이 뛰어납니다. 특별한 속성은 없으며, style 속성에 사용되어지는 요소로서 형태와 기능이 달라집니다.

 

 

Div 태그
- Division
- 시작과 종료 태그의 들어가는 내용에 따라 공간의 크기가 달라집니다.
- 자동 줄바꿈 기능을 가지고 있습니다.

 

Span 태그
- 시작과 종료 태그의 들어가는 내용에 따라 공간의 크기가 달라집니다.
- 자동 줄바꿈 기능을 가지고 있지 않습니다.

 

* width, height - 크기 (단위를 사용하지 않으면 자동으로 px로 인식합니다.)
<div style="width:100px;height:300px;">내용</div>
<span style="width:100px;height:300px;">내용</span>

* background - 배경
* border - 테두리
* padding - 내용과 경계의 여백
* margin - 박스와 윈도우 사이의 여백을 결정하여 박스의 위치를 정함. 요소로 상 ,하, 좌, 우(음수가능)
* overflow - 내용이 길 경우 스크롤바 생성
* font - 내용에 들아가는 글자의 스타일 결정
* color - 글자 색
  <div style="color:#ffooff">내용</div>
  <span style="color:red">내용 </span>