CSS의 display 속성은 요소를 어떻게 표시할지를 지정하는 데 사용됩니다. 다양한 display 속성 값이 있으며, 각 값은 다른 레이아웃 특성을 가집니다. 주요 display 속성 값과 간단한 설명은 다음과 같습니다:
block
요소를 블록 수준 요소로 표시하며, 요소는 새로운 라인에서 시작합니다. 주로 div, p, h1, h2 등의 블록 레벨 요소에 사용됩니다.
inline
요소를 인라인 수준 요소로 표시하며, 요소는 문장 또는 행 내에서 흐릅니다. 주로 span, a, strong 등의 인라인 요소에 사용됩니다.
inline-block
요소를 인라인 수준 요소로 표시하지만, 블록 레벨 요소처럼 내부적으로 너비와 높이를 설정할 수 있습니다. 주로 버튼, 아이콘 등의 요소에 사용됩니다.
none
요소를 화면에서 숨깁니다. 해당 요소와 그 하위 요소들은 렌더링되지 않습니다.
flex
요소를 유연한 컨테이너로 설정하고, 자식 요소들을 정렬 및 배치하는 데 사용됩니다. Flexbox 레이아웃을 구현할 때 주로 사용됩니다.
grid
요소를 그리드 컨테이너로 설정하고, 그리드 레이아웃을 구현하는 데 사용됩니다. CSS Grid 레이아웃을 사용할 때 주로 선택됩니다.
table
요소를 테이블 요소로 표시하며, 테이블 레이아웃을 구현하는 데 사용됩니다. 주로 table, tr, td 등의 요소에 사용됩니다.
inline-table
요소를 인라인 수준의 테이블 요소로 표시합니다.
list-item
요소를 목록 항목으로 표시하며, 목록 항목 마크(보통은 번호 또는 점)을 자동으로 추가합니다. 주로 li 요소에 사용됩니다.
initial
요소를 초기 기본 값으로 설정합니다.
inherit
부모 요소의 display 속성을 상속합니다.
unset
요소를 상속한 것과 같이 동작하거나, 부모 요소의 기본 display 값으로 동작합니다.
이러한 display 속성 값은 웹 페이지의 레이아웃을 구성하고 스타일을 조절하는 데 사용됩니다. 요소의 기본 display 값은 HTML 요소의 종류에 따라 다르며, CSS를 사용하여 이를 변경할 수 있습니다.
