display 속성

display 속성은 브라우저가 요소를 표시하는 방식을 설정합니다.

구문

값

값	설명
block	블록 수준 요소.
inline	인라인 요소.
inline-block	인라인 블록 요소.
list-item	요소는 목록 항목이 되고 앞에 목록 마커가 나타납니다.
flex	요소를 블록 수준으로 설정하고, 그 자식 요소들은 flex 요소가 됩니다.
inline-flex	요소를 인라인 블록으로 설정하고, 그 자식 요소들은 flex 요소가 됩니다.
grid	그리드 컨테이너 요소를 생성합니다.
none	요소가 완전히 사라지며 다른 모든 요소는 이 요소가 없는 것처럼 동작합니다.
table	요소가 테이블처럼 동작합니다.
table-cell	요소가 테이블 셀처럼 동작합니다.
inline-table	요소가 테이블처럼 동작하지만, 테이블은 인라인 요소이며 텍스트와 같은 다른 요소에 의해 감싸일(wrap) 수 있습니다.
table-caption	요소가 caption 태그처럼 동작합니다.
table-column	요소가 테이블 열처럼 동작합니다.
table-row	요소가 테이블 행처럼 동작합니다.
table-column-group	요소가 colgroup 태그처럼 동작합니다.
table-footer-group	요소가 tfoot 태그처럼 동작합니다.
table-header-group	요소가 thead 태그처럼 동작합니다.
table-row-group	요소가 tbody 태그처럼 동작합니다.
run-in	컨텍스트에 따라 요소를 블록 수준 또는 인라인 요소로 설정합니다.

기본적으로 요소들은 서로 다른 display 값을 가질 수 있습니다.