css에서 element의 디스플레이 특성

    
**block-level 요소:**

페이지 상에서 새로운 줄에서 시작하고, 다음 요소는 이 요소 다음의 새로운 줄에서 시작합니다. 즉, 전체 가로 너비를 차지합니다.

기본적으로 가로 너비는 부모 요소의 전체 너비를 차지하게 됩니다 (width 값이 명시적으로 설정되지 않았다면).

width, height, margin, padding 등의 속성을 모두 적용할 수 있습니다.

예: div, h1, p, form 등.

**inline-level 요소:**

페이지 상에서 새로운 줄을 시작하지 않고, 텍스트나 다른 인라인 요소와 동일한 줄에 연속해서 표시됩니다.

내용의 너비만큼만 영역을 차지합니다. 즉, 필요한 만큼의 너비를 차지하게 됩니다.

width와 height 속성이 적용되지 않습니다. 그러나 padding, margin (오른쪽과 왼쪽만), border는 적용될 수 있습니다.

상하단의 margin과 padding은 적용되지만, 다른 요소를 밀어내지는 않습니다.

예: <span>, <a>, <img>, <strong>등.

**inline-block:**

inline과 block의 특성을 조합한 디스플레이 속성입니다.

요소는 인라인 수준에서 표시되지만, block처럼 width와 height 속성을 적용받을 수 있습니다.

<span>과 같이 인라인 요소에 블록 레벨의 스타일링을 적용하고 싶을 때 유용합니다.

**flex:**

요소를 유연한 박스 모델 레이아웃의 컨테이너로 설정합니다. 이렇게 설정하면 자식 요소들은 flex 아이템으로서 표시됩니다.

flex 레이아웃은 복잡한 레이아웃과 정렬 문제를 쉽게 해결할 수 있도록 도와줍니다.

주요 관련 속성: flex-direction, justify-content, align-items, flex-wrap 등.

**grid:**

요소를 그리드 레이아웃의 컨테이너로 설정합니다. 그리드는 행과 열의 2차원 레이아웃 시스템을 제공합니다.

복잡한 레이아웃 디자인을 위해 매우 유용하며, flex보다 고차원적인 레이아웃 제어를 제공합니다.

주요 관련 속성: grid-template-columns, grid-template-rows, grid-gap, grid-area 등.

table, table-row, table-cell 등:

요소를 HTML 테이블과 유사한 방식으로 표시합니다. 이 값들은 레이아웃 목적으로 테이블 스타일링을 적용하고자 할 때 사용됩니다.

현대 웹 디자인에서는 레이아웃을 위해 이러한 값들을 사용하는 것보다 flex나 grid를 사용하는 것이 더 권장됩니다.

**none:**

요소를 DOM에서 숨깁니다. visibility: hidden과는 다르게, display: none은 요소를 완전히 제거하여 페이지 레이아웃에 아무런 영향을 미치지 않습니다.