display는 가장 기본적인 CSS 속성 중 하나입니다 — 요소가 어떻게 box를 생성하는지와 자식이 어떻게 배치되는지를 제어합니다.
css
{ : block; }
{ : inline; }
{ : inline-block; }
{ : none; }
{ : flex; }
{ : grid; }
display는 실제로 두 가지를 설정합니다. box가 바깥쪽에서 어떻게 동작하는지(block/inline)와 자식을 안쪽에서 어떻게 배치하는지(flow/flex/grid). display: flex는 "이 box는 block 레벨이고, 자식은 flex item이다"라는 의미입니다.
.gone { display: none; } /* 레이아웃에서 제거 — 공간을 차지하지 않음 */
.hidden { visibility: hidden; } /* 보이지 않지만 여전히 공간을 차지 */
핵심 차이: display: none은 레이아웃을 접고(스크린 리더에서도 숨김), visibility: hidden은 요소가 있던 자리에 빈 공간을 남깁니다. 정말로 제거하려면 display: none을, 레이아웃을 유지하며 숨기려면 visibility: hidden을 사용하세요.
.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 차이는 자주 출제되고 실무적으로 중요한 디테일입니다.