레이아웃

💻 display:

🔥 1. 기본 Display 속성

• display: block: 요소가 자체적인 박스를 형성하며, 그로 인해 간격(마진, 패딩 등)이 유지됩니다.
• display: inline: 요소가 인라인 박스로 생성되며, 내용에 맞게 크기가 결정되고 같은 줄에 다른 인라인 요소들과 함께 배치됩니다.
• display: inline-block: 인라인 요소처럼 같은 줄에 배치되지만, 블록 요소처럼 너비와 높이를 지정할 수 있습니다.

🔥 2. 레이아웃을 위한 Display 속성

• display: flex: 요소를 플렉스 컨테이너로 만들어, 내부의 자식 요소들을 유연하게 배치할 수 있습니다.
  • 주요 속성: justify-content, align-items, flex-wrap, flex-direction 등.
  • justify-content: center; /* 수평 중앙 정렬 */*
  • align-items: center; /* 수직 중앙 정렬 */
  • flex-direction: row /*왼쪽에서 오른쪽으로 */
• display: grid: 요소를 그리드 컨테이너로 만들어, 2차원 레이아웃(행과 열)을 구성할 수 있습니다.*
  • 주요 속성: grid-template-columns, grid-template-rows, grid-gap

🔥 3. 기타 유용한 display 속성

• display: none: 요소를 렌더링하지 않으며, 문서 흐름에서 완전히 제거합니다.
• display: table, table-row, table-cell: 부모에 display: table, 자식에 display: table-cell을 적용하여 테이블 셀처럼 배치할 수 있습니다.

.table {
  display: table;
  width: 100%;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
  padding: 10px;
  border: 1px solid #ccc;
}

• display: contents: 요소 자체가 렌더링되지 않고 자식들만 노출되므로, 해당 요소가 제공하던 간격(공백)이 사라집니다.
• display: inline-flex: : 요소를 인라인 요소로 취급하면서 플렉스 컨테이너의 기능을 제공합니다.
• display: inline-grid : 요소를 인라인 요소로 취급하면서 그리드 컨테이너의 기능을 제공합니다.