div와 span태크

div태그는 한줄전체를 영역으로 span태그는 내용 만큼만을 영역으로 한다.

예제1

[태그]⇩

<div style="color: white; background: gray;">div영역</div>
<span style="color: white; background: red;">span 첫번째 영역</span>

<span style="color: white; background: green;">span 두번째 영역</span>

<span style="color: white; background: blue;">span 세번째 영역</span>

[결과]⇩

div영역

span 첫번째 영역span 두번째 영역span 세번째 영역

예제2

[태그]⇩

<div style="color: white; blackground: gray;">div영역</div>

<div style="color: white; blackground: gray;">div영역</div>

<span style="color: white; background: red;">span 첫번째 영역</span>

<span style="color: white; background: green;">span 두번째 영역</span>

<span style="color: white; background: blue;">span 세번째 영역</span>

[결과]⇩

div영역

div영역

span 첫번째 영역span 두번째 영역span 세번째 영역

div태그는 한줄을 차지하므로 위에서 처럼 두줄에 걸쳐 표시되고

span태그는 영역 만큼만 출력되고 옆으로 이동하여 표시됨.

그리고 div태그를 style로 조정하여 div태그 안에 또 div태그를 넣어서 아래와 같이 홈페이지 레이아웃을 구성할수 있음

<div style="background: orange; width: 740px; height: 100px;">div태그 main_top</div>

<div style="float:left;background:red;width:120px;height:400px;">div태그 left_menu</div>
<div style="float: left;background:green;width:500px;height:400px;">div태그 main_content</div>
<div style="float: left;background:blue;width:120px;height:400px;">div태그 right_menu</div>

<div style="float:left;background:orange;width:740px;height:100px;">div태그 footer</div>

div태그 main_top

div태그 left_menu

div태그 main_content

div태그 right_menu

div태그 footer