display의 속성과 ie에서 백그라운드 로딩문제 해결방안

display속성은 css에서 거의 TOP10안에 드는 핵심적인 요소중의 으뜸이라고 할 수 있다.

html4에서는 모든 엘리먼트가 block요소와 inline요소로 분리되어 그 사용도가 더욱 의미 있게 되었으나

html5로 넘어가는 현 시점에서는 단순하게 블럭과 인라인 요소로만 구분 짓는 것은 무리라고 할 수 있을것이다.

 

먼저 display의 속성은 어떻게 되는지 부터 살펴보자

display:

block - 인라인 박스로 만들어 준다.

inline - 인라인 박스로 만들어 준다.

inline-block - 블록박스로 만들면서 인라인 박스처럼 가로로 배열 된다.

none - 박스를 만들지 않으며 시각적으로 완전히 보이지 않게 만든다.

table - 블록레벨의 표로 만든다.

inline-table  -  인라인레벨의 표로 만든다.

table-row  -  행으로 만든다 (tr 기본속성)

table-row-group  -  본체 행 그룹으로 만든다 (thead 기본속성)

table-header-group  -  헤더 행 그룹으로 만든다. (thead 기본속성)

table-footer-group  -  푸터 행 그룹으로 만든다. (tfoot 기본속성)

table-column  -  열로 만든다. (col 기본속성-보이지않음)

table-cell  -  하나의 셀로 만든다. (td 기본속성)

table-caption  -  캡션으로 만든다. (caption 기본속성)

list-item  -  li요소와 같은 블록박스와 목록항목의 인라인박스로 만든다.

run-in  -  런인박스로 만든다.

compact  -  콤팩트 박스로 만든다.

marker  -  그 요소의 전후에 생성된 내용을 마커로 정의한다.

 

(display 속성의 일부는 ie에서 지원되지 않는 경우가 있으니 참고)

 

 

1. 페이지 레이아웃에서 상단에 전체 백그라운드를 깔았을 경우 새로고침시 깨짐 현상이 발생될 때

   display:table 요소를 백그라운드를 넣은 요소에 삽입해 주면 해결된다.

 

2. 박스 엘리먼트에서 세로 중앙 정렬로 내용을 삽입해야 할 경우

    display:table-cell 요소를 넣어주면 vertice-align:middle 처럼 사용할 수 있다.

 

3. span요소에 박스로 만들면서 가로 정렬 시킬 때

    display:inline-block 를 사용하면 되지만 ie6,7에서 inline-block을 지원하지 않기 때문에

    아래 내용과 같이 핵을 사용해서 해결하면 된다.

    display:inline-block;*display:inline;zoom:1;