머라카노?

1. div와 span

<div> div는 어케 돌아가는가 1</div>

<div> div는 어케 돌아가는가 2</div>

<div> div는 어케 돌아가는가 3</div>

=> 웹브라우저 에서는 아래와 같이 표시된다.

div는 어케 돌아가는가 1   

div는 어케 돌아가는가 2 

div는 어케 돌아가는가 3  

 

<span>span 은... 1</span>

<span>span 은... 2/span>

<span>span 은... 3/span>

=> 웹브라우저 에서는 아래와 같이 표시된다.

span 은... 1span 은... 2pan 은... 3

 

div와 span의 가장 큰 차이는 줄 바꿈 여부이다.

div가 줄바꿈되는 이유는 css display속성 기본값이 block이고,

span이 줄바꿈되지 않는 이유는 css display속성 기본값이 inline이기 때문이다.

이 두 설정을 반대로 해보자.

div{display:inline}

span{display:block}

^^

차이점

1. block으로 설정하면 줄바꿈되고, inline으로 설정하면 줄바꿈이 되지 않는다.

2. block로 설정하면 상/하 margin과 padding속성을 사용할 수 있지만,

    inline으로 설정하면 상/하 margin과 패딩은 사용할 수 없다.

3. block로 설정하면 width, height 속성을 사용할 수 있지만,

    inline으로 설정하면 width, height속성을 사용할 수 없다.

2. display