display 속성은 무엇을 제어하나요?

Question

Accepted Answer

`display`는 가장 기본적인 CSS 속성 중 하나입니다 — 요소가 **어떻게 box를 생성하는지**와 자식이 어떻게 배치되는지를 제어합니다.

```css
.a { display: block; }        /* 전체 너비, 새 줄에서 시작 (div, p, section) */
.b { display: inline; }       /* 텍스트 흐름에 따라가며 width/height 무시 (span, a) */
.c { display: inline-block; } /* 인라인으로 흐르지만 width/height/margin 존중 */
.d { display: none; }         /* 완전히 제거 — 공간 없음, 렌더링 안 됨 */
.e { display: flex; }         /* flex 컨테이너 — 자식에 대한 1D 레이아웃 */
.f { display: grid; }         /* grid 컨테이너 — 자식에 대한 2D 레이아웃 */
```

## 외부(outer) vs 내부(inner) display

`display`는 실제로 두 가지를 설정합니다. box가 **바깥쪽**에서 어떻게 동작하는지(block/inline)와 **자식**을 안쪽에서 어떻게 배치하는지(flow/flex/grid). `display: flex`는 "이 box는 block 레벨이고, 자식은 flex item이다"라는 의미입니다.

## display: none vs visibility: hidden

```css
.gone   { display: none; }        /* 레이아웃에서 제거 — 공간을 차지하지 않음 */
.hidden { visibility: hidden; }    /* 보이지 않지만 여전히 공간을 차지 */
```

핵심 차이: `display: none`은 레이아웃을 접고(스크린 리더에서도 숨김), `visibility: hidden`은 요소가 있던 자리에 빈 공간을 남깁니다. 정말로 제거하려면 `display: none`을, 레이아웃을 유지하며 숨기려면 `visibility: hidden`을 사용하세요.

## 레이아웃의 주력 도구

```css
.container {
  display: flex;          /* 자식을 행/열로 배치 (1차원) */
  gap: 1rem;
}
.grid {
  display: grid;          /* 자식을 행과 열로 배치 (2차원) */
  grid-template-columns: repeat(3, 1fr);
}
```

최신 레이아웃은 거의 전적으로 `flex`(1D — 행 또는 열)와 `grid`(2D — 행과 열 함께) 위에 구축됩니다.

## 왜 중요한가

`display`는 요소의 전체 레이아웃 동작을 결정합니다.

block vs inline vs inline-block을 아는 것은 기본 흐름을 설명하고, `flex`/`grid`는 최신 레이아웃의 핵심이며, `none` vs `visibility` 차이는 자주 출제되고 실무적으로 중요한 디테일입니다.