div, span tag 이해

< DIV - BLOCK 요소 >

DIV 가 두개 있다는 가정하에

<div id="1"></div>

<div id="2"></div>

결과 ( 가상의 100%의 Width를 갖으므로 )

1

2

주로 레이아웃 용도로써 사용

<style>

#outer

{

   position: absolute;

  top: 50%;

  margin-top: -200px; /* half of #content height*/

  left: 0;

  width: 100%;

  background-color: #dda0dd;

}

#inner

{

   width: 624px;

  margin-left: auto;

  margin-right: auto;

  height: 395px;

  background-color: #FF8200 ;

}

</style>

<div id="outer"><div id="inner">가로세로중앙으로 놓고 싶다면</div></div>

< SPAN - IN-LINE 요소 >

SPAN 이 두개 있다는 가정하에

<span id="1"></div>

<span id="2"></div>

결과 ( 가상의 100%의 Width를 갖으므로 )

1 2

자동 줄바꿈을 허용하지 않는다.