display

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

block 요소는 정렬할때 display:liline; 이나 float를 사용한다.

display는 liline 혹은 block 혹은 hidden 을 속성값을 지닌다

 

고로 block를 inline으로 하면 인라인특징인 left 정렬이 된다.

span은 인라인 요소이기 때문에

 

<span>오데로정렬 &nbsp&nbsp</span><span>오데로정렬 &nbsp&nbsp</span>

-> 왼쪽 정렬이 될것이다.

하지만 block요소들은 float 설정하지 않은 이상 한줄씩 나온다. 그래서

block요소 정렬을 하기 위해서는

block의 정렬은 float

inline의 정렬은 text-align

      (block의 중앙정렬은 margin:0 auto; 반드시 block는 width값이 있어야 한다. )