Web story/CSS

display 스타일 속성

JKJ1004 2008. 4. 22. 15:53

개체가 표현되는가를 반환하거나 설정한다.

Script object.style.display=[sVal]
HTML <ELEMENT style="display:sVal;">
CSS cssSelector {display:sVal;}
인수
cssSelector : (스타일 선택자)
display 속성을 가질수 있는 엘레멘트( ELEMENT)나 클라스(class) 이름 혹은 인식자(id)이다.
sVal : (속성 문자열)
display 스타일 속성은 개체가 표현되는가를 나타내는 문자열이다.
block 개체가 블럭엘레멘트로 표현된다.
none 개체가 디스플레이되지 않는다.
inline 디폴트이며, 개체가 내용의 크기에따라 인라인 엘레멘트로 표현된다.
inline-block 개체가 인라인으로 표현되지만, 개체의 내용은 블럭 엘레멘트로 표현된다. 인접 인라인 엘레멘트는 간격을 허용하며 같은 라인에 표현된다.
list-item IE6 이후, 개체가 블럭엘레멘트로 표현되고 목록항목 마크가 추가된다.
table-header-group 테이블의 머릿부분(header)이 항상 모든 줄과 줄의 구룹보다 먼저, 그리고 윗 제목(caption) 아래 디스플레이된다. 이 머릿부분은 테이블이 확장된 각 페이지에 디스플레이된다.
table-footer-group 테이블의 바닥부분(footer)이 항상 모든 줄과 줄의 구룹 다음, 그리고 바닥 제목(caption) 위에 디스플레이된다. 이 바닥부분은 테이블이 확장된 각 페이지에 디스플레이된다.

이 속성은 currentStyle에서는 읽기전용이고, 그외의 개체에서는 읽기/쓰기이며, 디폴트값은 다음과 같으며 그 외는 inline이다.

ADDRESS BLOCKQUOTE BODY CENTER COL COLGROUP DD DIR DIV DL DT FIELDSET FORM Hn HR IFRAME LEGEND LISTING MARQUEE MENU OL P PLAINTEXT PRE TABLE TD TH TR UL XMP block
FRAME TBODY TFOOT THEAD none
LI list-item

CSS(Cascading Style Sheets) 애트리뷰트는 상속되지 않는다.

특기

IE6에서 이 속성은 list-item 값을 지원한다.

IE4.0에서, block, inlinelist-item 값들은 명시적으로 지원하지 않지만 엘레멘트는 표현된다.

IE5에서, blockinline 값들은 명시적으로 지원된다.

IE5.5와 이전버전에서, LI 엘레멘트의 이 속성의 디폴트값은 block이다.

IE5.5에서 inline-block 값을 지원한다. 이 값을 사용하여 width이나 height 지정없이 개체에 배치(layout )를 만들 수 있다.

모든 보이는 object들은 블럭이거나 인라인 엘레멘트이다. 예를들어 div 개체는 블럭 엘레멘트이고, span 개체는 인라인 엘레멘트이다. 블럭엘레멘트는 전형적으로 시작하면서와 끝나면서 새로운 줄이 삽입되며, 다른 블럭엘레멘트나 인라인 엘레멘트를 포함할 수 있다. 이에 반해 인라인 엘레멘트는 새로운 줄을 삽입하지 않고, 인라인 엘레멘트나 데이터을 포함할 수 있으나 블럭 엘레멘트를 포함할 수 없다. display 속성을 변경하면 주위 내용의 배치에 영향을 준다.

  • block 값을 갖는 엘레멘트 다음에 새로운 줄을 삽입한다.
  • inline 값을 갖는 엘레멘트로부터 줄을 제거한다.
  • none 값을 갖는 엘레멘트로부터 디스플레이되었던 데이터를 감춘다.

visibility 속성과는 달리, displaynone 값을 가지면 스크린 상에서 개체를 위한 공간이 확보되지 않는다.

table-header-grouptable-footer-group 값들은 복수 페이지에서 tHeadtFoot 개체들의 내용을 각 페이지에 디스플레이할 수 있도록 지정하기 위하여 사용될 수 있다.

반응형