Summary
엘리먼트의 디스플레이 속성을 지정한다.
| 값 | inline | block | list-item | run-in | compact | marker | 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 |
|---|---|
| 기본값 | inline |
| 적용대상 | 모든요소 |
| 상속 | 상속안됨 |
| 퍼센테이지 | 지정불가 |
| 미디어 | all |
Value
- block : 엘리먼트를 블럭박스로 만든다. [sample]
- inline : 엘리먼트를 인라인박스로 만든다.
- inline-block : 엘리먼트를 블럭박스로 만들지만, 인라인요소처럼 배치한다. (CSS2.1 권고후보에 추가 됨)
- list-item : li가 갖는 기본 속성(목록박스와 목록항목)을 적용시킨다. [sample]
- none : 해당 엘리먼트의 박스는 물론 그 자식 박스까지 생성하지 않아 시각적으로 보이지 않게 된다.
- run-in : 엘리먼트를 런인박스로 만든다. [sample]
테스트결과 FF미지원, IE10지원, safari지원, chrome지원
compact: CSS2.1 권고후보에서 삭제marker: CSS2.1 권고후보에서 삭제- table : <table>과 같음
- table-row : <tr>
- table-cell : <td>
- table-caption : <caption>
- table-column : <col>
- table-column-group : <colgroup>
- table-row-group : <tbody>
- table-header-group : <thead>
- table-footer-group : <tfoot
- inline-table : 인라인 블록 안에 테이블 생성
Tip
- 다음과 같이 사용할 수 있다.
123
.test-display {display: block;}
