display: value|initial|inherit;
요소가 표시될때 사용할 박스 종류를 지정합니다.
모든 HTML요소는 요소 유형에 따라 block, inline 등의 기본 값을 가집니다.
HTML > 컨텐츠그룹화 페이지 참고
display 속성을 사용하면 표시 유형을 변경할 수 있습니다.
| 갑 | 설명 |
|---|---|
| inline |
인라인 요소로 표시합니다. 새 줄에서 시작하지 않고 필요한 콘텐츠의 크기만큼 폭과 높이를 같습니다. width, height 속성을 갖을 수 없습니다. |
| block |
블록 요소로 표시합니다. 새줄에서 시작하며 전체 폭을 갖습니다. |
| inline-block |
요소를 인라인 수준의 블록 컨테이너로 표시. 새줄에서 시작하지 않지만 width, height값을 적용할 수 있습니다. |
| none | 요소를 표시하지 않습니다. |
| list-item | 요소를 <li> 요소와 같이 표시합니다. |
| run-in | 상황에 따라 인라인요소 또는 블럭요소로 표시합니다. |
| flex | 요소를 블록수준의 flex 컨테이너로 표시합니다. |
| inline-flex | 요소를 인라인수준의 flex 컨테이너로 표시합니다. |
| table | 요소를 <table> 요소와 같이 표시합니다. |
| table-row | 요소를 <tr> 요소와 같이 표시합니다. |
| table-cell | 요소를 <td> 요소와 같이 표시합니다. |
| inline-table | 요소를 인라인 수준의 테이블 컨테이너로 표시합니다. |
| table-caption | 요소를 <caption> 요소와 같이 표시합니다. |
| table-column-group | 요소를 <colgroup> 요소와 같이 표시합니다. |
| table-column | 요소를 <col> 요소와 같이 표시합니다. |
| table-header-group | 요소를 <thead> 요소와 같이 표시합니다. |
| table-row-group | 요소를 <tbody> 요소와 같이 표시합니다. |
| table-footer-group | 요소를 <tfoot> 요소와 같이 표시합니다. |
visibility: visible|hidden|collapse|initial|inherit;요소가 표시되는지 여부를 지정합니다.
| 값 | 설명 |
|---|---|
| visible | 기본갑, 요소를 표시합니다. |
| hidden | 요소를 표시하지 않습니다.(공간을 차지 합니다) |
| collapse |
table 요소 전용입니다. 행이나 열을 표시하지 않습니다.(공간을 차지 하지 않습니다) 다른 요소에 사용되면 hidden 값으로 적용됩니다. |