display 속성

CSS의 display 속성은 HTML 요소가 페이지에서 어떻게 표시될지를 정의하는 중요한 속성입니다. 이 속성은 요소의 레이아웃 및 다른 요소와의 관계를 결정합니다. display 속성은 다양한 값들을 가질 수 있으며, 각 값에 따라 요소의 표시 방식이 달라집니다. 주요 값들을 살펴보겠습니다:

1. block

• block 값이 적용된 요소는 블록 요소로 표시됩니다.
• 기본적으로 새로운 라인에서 시작하며, 가로 너비는 부모 요소의 전체 너비를 차지합니다.
• 예시: <div>, <p>, <h1> 등이 기본적으로 block 요소입니다.

div {
  display: block;
}

2. inline

• inline 값이 적용된 요소는 인라인 요소로 표시됩니다.
• 요소는 새로운 라인을 시작하지 않고, 다른 인라인 요소들과 같은 라인에 나란히 표시됩니다.
• 가로 너비와 높이는 콘텐츠의 크기에 맞게 조정됩니다.
• 예시: <span>, <a>, <strong> 등이 기본적으로 inline 요소입니다.

span {
  display: inline;
}

3. inline-block

• inline-block은 inline과 block의 특성을 결합한 값입니다.
• 요소는 인라인처럼 다른 요소들과 같은 라인에 나란히 표시되지만, 블록 요소처럼 너비와 높이를 설정할 수 있습니다.

div {
  display: inline-block;
}

4. none

• display: none을 적용하면, 해당 요소는 페이지에서 완전히 사라지게 됩니다.
• 요소가 사라지면 레이아웃에서도 공간을 차지하지 않게 됩니다. 이는 visibility: hidden과는 다르며, visibility: hidden은 공간을 차지하지만 보이지 않게 합니다.

div {
  display: none;
}

5. flex

• flex는 플렉스 박스 레이아웃을 적용하는 값입니다.
• 이 값을 사용하면, 자식 요소들이 수평 또는 수직으로 정렬되며, 요소의 크기 및 배치에 대해 보다 유연한 조정을 할 수 있습니다.
• 예시: display: flex가 적용된 부모 요소는 자식 요소들을 플렉스 컨테이너로 만들어 배치합니다.

.container {
  display: flex;
}

6. grid

• grid는 CSS 그리드 레이아웃을 적용하는 값입니다.
• 그리드 레이아웃은 2차원적으로 요소를 정렬할 수 있는 강력한 레이아웃 시스템입니다.
• 자식 요소들은 그리드 셀에 맞게 배치되며, 행(row)과 열(column)로 구분됩니다.

.container {
  display: grid;
}

7. list-item

• list-item은 요소를 목록 항목으로 표시하게 만듭니다.
• 이 값은 주로 <li> 요소에 사용되며, 목록 항목의 특성을 부여합니다.

li {
  display: list-item;
}

8. table, inline-table, table-row, table-cell

• table과 관련된 값들은 표(table) 레이아웃을 만들 때 사용됩니다.
  • display: table: 요소를 표처럼 표시합니다.
  • display: table-row: 요소를 표의 행으로 표시합니다.
  • display: table-cell: 요소를 표의 셀로 표시합니다.

.table {
  display: table;
}
.table-row {
  display: table-row;
}
.table-cell {
  display: table-cell;
}

9. contents

• contents는 요소 자체는 표시되지 않지만, 자식 요소들은 그대로 표시되는 특성을 가집니다.
• 이 값은 주로 구조적인 이유로 요소를 감쌀 때 사용되며, 렌더링에서는 그 요소를 "없앤" 것처럼 동작합니다.

div {
  display: contents;
}

---

이 외에도 여러 가지 값들이 있지만, 이들 값이 가장 기본적이고 자주 사용되는 display 속성 값들입니다. 각 값은 레이아웃과 스타일링에 큰 영향을 미치므로, 적절한 상황에 맞춰 사용하면 효율적인 레이아웃을 구현할 수 있습니다!