display 속성에 대해

display attributes

디스플레이 속성은 요소가 페이지에 어떻게 렌더링 되고 배치되는지를 결정하는 속성

display: block flex;
위 처럼 여러 속성 동시에 사용 불가능

display 의 모든 속성

display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* box generation */
display: none;
display: contents;

/* multi-keyword syntax */
display: block flex;
display: block flow;
display: block flow-root;
display: block grid;
display: inline flex;
display: inline flow;
display: inline flow-root;
display: inline grid;

/* other values */
display: table;
display: table-row; /* all table elements have an equivalent CSS display value */
display: list-item;

/* Global values */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset

디스플레이 속성 설명

기본적인 박스 모델 값

요소가 자체적인 블록 포맷 컨텍스트를 생성합니다. 자식 요소들이 부모 요소의 흐름과 상관없이 독립적으로 배치됩니다.

display: block;

요소가 블록 레벨로 렌더링됩니다. 블록 요소는 항상 새 줄에서 시작하며, 
가로 공간을 전부 차지합니다. 
요소가 인라인 레벨로 렌더링됩니다. 
인라인 요소는 줄바꿈이 발생하지 않고, 필요한 만큼의 가로 공간만 차지합니다. 
인라인 요소처럼 한 줄에 위치하지만, 블록처럼 너비와 높이를 설정할 수 있습니다.

display: flex;

요소가 Flexbox 컨테이너로 렌더링됩니다. 
자식 요소들의 배치를 유연하게 관리할 수 있는 레이아웃 방식입니다.

display: inline-flex;

Flexbox 컨테이너로 동작하지만, 인라인 요소처럼 한 줄에 나타납니다.

display: grid;

요소가 그리드 컨테이너로 렌더링됩니다. 자식 요소들을 행과 열로 구성된 그리드 안에서 배치합니다.

display: inline-grid;

그리드 컨테이너로 동작하지만, 인라인 요소처럼 한 줄에 나타납니다.
display: flow-root;

박스 생성 관련 값

display: none;
요소가 렌더링되지 않습니다. 
문서에서 공간을 차지하지 않으며, 마치 존재하지 않는 것처럼 동작합니다.

display: contents;
요소 자체는 렌더링되지 않지만, 자식 요소들은 DOM 트리 안에서 여전히 존재하며 렌더링됩니다.

테이블 레이아웃 값

display: table;
요소가 테이블처럼 렌더링됩니다. 자식 요소들은 테이블 행, 셀로 구성될 수 있습니다. 예: <table>

display: table-row;
요소가 테이블 행처럼 렌더링됩니다. 자식 요소들은 테이블 셀로 배치됩니다. 예: <tr>

display: list-item;
요소가 리스트 아이템처럼 렌더링됩니다. 보통 목록 표시 기호가 함께 렌더링됩니다. 예: <li>

글로벌 값

display: inherit;
부모 요소의 display 값을 상속받습니다.

display: initial;
기본 display 값으로 초기화합니다. 블록 요소는 block, 인라인 요소는 inline으로 설정됩니다.

display: revert;
요소의 display 값을 사용자 정의 스타일 규칙을 무시하고, 브라우저의 기본 스타일 또는 상위 스타일로 되돌립니다.

display: revert-layer;
revert와 유사하지만, 레이어의 변화를 적용할 때 스타일을 되돌립니다.

display: unset;
display 속성을 초기값으로 설정하거나 상속 여부에 따라 설정합니다.