CSS 의 display 속성, inline / block / none / inline-block / table

태그끼리의 위치는 inline 과 block, none, inline-block 등의 4가지로 분류할 수 있는데,

DIV 태그같은 경우는 block 의 특성을 ,

SPAN 태그같은 경우는 inline 의 특성을 가지게 된다.

CSS 의 display 속성은 이러한 원래의 특성을 변경할 때 사용된다.

<style type="text/css">

div {

        width: 200px; height: 20px;

        border: 1px solid; padding: 5px;

        margin: 10px;

        display: inline;    // 원래는 block 속성을 가진 div 태그가 inline 으로 변경되어 줄바꿈이 일어나지 않게된다.

} 

     

span {

        width: 200px; height: 20px;

        border: 1px solid; padding: 5px;

        margin: 10px;

        display: block    // 원래는 inline 속성을 가진 span 태그가 block 으로 변경되어 줄바꿈이 일어나게 된다. 

}

</style>

아래 포스팅에 상세히 설명되어 있다.

http://mainia.tistory.com/3295

또한, display 속성은 위 4가지 이외에도 많은데....  아래와 같이 16가지나 된다. 

출처 : http://dev.epiloum.net/834

inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

display 속성을 변경하는 이유는 원래는 지원되지 않는 CSS 속성을 사용할 수 있다는 것이다.

예를 들어, span 에는 width/height 값을 사용할 수 없지만, 이를 block 속성으로 변경하게되면, 마치 div 태그처럼 

width/height 속성을 사용할 수 있게된다. 

• Box-model 계열
  대부분의 태그에서 사용하는 값들로, 어떤 요소를 Block-level 요소 또는 Inline 요소로 만들 때 사용합니다. block, inline, inline-block의 3개 값이 여기에 속합니다. 대게의 태그들은 display 속성의 기본값이 block과 inline 중의 하나입니다.

• List 계열
  <li> 태그에서는 특이하게도 list-item라는 display 속성을 사용합니다. 기본적으로는 Block-level의 요소들처럼 작동하지만, 추가적으로 list-style 계열의 CSS 속성을 이용할 수 있다는 특징이 있습니다.

• Table 계열
  이 계열에 속한 값들은 <table> 태그와 그 부속태그에서 사용되는 값들입니다. display 속성 값의 무려 2/3을 차지하는데, 워낙에 비중이 커서 CSS Spec에서도 The CSS table model라는 별도의 항목을 마련해서 설명하고 있습니다. 이 항목을 살펴보면 <table>과 그 부속태그에는 저마다의 display 속성값이 정해져 있음을 알 수 있습니다.

• 기타
  이제 남은 것은 none과 inherit 뿐입니다. display 속성을 none으로 지정한 요소가 있다면, 해당 요소와 그 자식요소들은 화면에서는 물론이요 레이아웃 자체에서 완전히 사라지게 됩니다. 한편 display 속성을 inherit로 지정된 요소는, 부모 요소의 display 속성을 그대로 따르게 됩니다.