display

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

1. 다음과 같이 사용할 수 있다.

   .test-display {
       display: block;
   }