개체가 표현되는가를 반환하거나 설정한다.
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) 애트리뷰트는 상속되지 않는다.
- cssSelector : (스타일 선택자)
- 특기
-
IE6에서 이 속성은 list-item 값을 지원한다.
IE4.0에서, block, inline과 list-item 값들은 명시적으로 지원하지 않지만 엘레멘트는 표현된다.
IE5에서, block과 inline 값들은 명시적으로 지원된다.
IE5.5와 이전버전에서, LI 엘레멘트의 이 속성의 디폴트값은 block이다.
IE5.5에서 inline-block 값을 지원한다. 이 값을 사용하여 width이나 height 지정없이 개체에 배치(layout )를 만들 수 있다.
모든 보이는 object들은 블럭이거나 인라인 엘레멘트이다. 예를들어 div 개체는 블럭 엘레멘트이고, span 개체는 인라인 엘레멘트이다. 블럭엘레멘트는 전형적으로 시작하면서와 끝나면서 새로운 줄이 삽입되며, 다른 블럭엘레멘트나 인라인 엘레멘트를 포함할 수 있다. 이에 반해 인라인 엘레멘트는 새로운 줄을 삽입하지 않고, 인라인 엘레멘트나 데이터을 포함할 수 있으나 블럭 엘레멘트를 포함할 수 없다. display 속성을 변경하면 주위 내용의 배치에 영향을 준다.
- block 값을 갖는 엘레멘트 다음에 새로운 줄을 삽입한다.
- inline 값을 갖는 엘레멘트로부터 줄을 제거한다.
- none 값을 갖는 엘레멘트로부터 디스플레이되었던 데이터를 감춘다.
visibility 속성과는 달리, display가 none 값을 가지면 스크린 상에서 개체를 위한 공간이 확보되지 않는다.
table-header-group와 table-footer-group 값들은 복수 페이지에서 tHead와 tFoot 개체들의 내용을 각 페이지에 디스플레이할 수 있도록 지정하기 위하여 사용될 수 있다.
'Web story > CSS' 카테고리의 다른 글
실전 비 표준 가이드 ‘CSS Hack’. (0) | 2008.08.27 |
---|---|
체크박스옆의 글자를 체크박스와 같은라인에 위치하게 맞추기 (0) | 2008.07.23 |
display:inline의 잘못된 오해 (2) | 2008.05.07 |
css 디자인 (1) | 2008.03.06 |
css 유효성 검사 (0) | 2008.03.06 |