디스플레이(display) 속성
css의 display 속성은 HTML 요소가 페이지에 어떻게 배치되고 표시될지를 정의하는 중요한 속성입니다.
display 속성에는 다양한 값이 있으며, 각 값은 요소의 레이아웃 방식에 영향을 줍니다.
display 속성을 적절히 활용하면 다양한 레이아웃을 구성할 수 있습니다.
block
- block은 블록 상자를 생성하고, 일반적인 흐름에서는 요소 앞과 뒤에 줄 바꿈을 생성합니다.
<div>,<p>,<h1>등이 기본적으로 block 요소입니다.
inline
- inline 요소는 앞이나 뒤에 줄 바꿈을 생성하지 않는 하나 이상의 인라인 상자를 생성합니다.
- 일반적인 흐름에서 다음 요소는 공백이 있는 경우 같은 줄에 있습니다.
<span>,<a>,<strong>등이 대표적인 inline 요소입니다.
inline-block
- 요소가 inline 요소처럼 같은 줄에 배치되지만, block 요소처럼 너비와 높이를 설정할 수 있습니다.
- 다른 inline 요소들과 같은 줄에 위치하지만, block 요소처럼 동작합니다.
none
- 요소가 페이지에 표시되지 않습니다.
- 해당 요소는 렌더링되지 않으면 공간도 차지하지 않습니다.
flex
- 요소가 flex 컨테이너로 설정됩니다.
- 자식 요소들이 flex 아이템으로 동작하고, flex 레이아웃을 통해 배치됩니다.
- 복잡한 레이아웃을 간단하게 구성할 수 있습니다.
grid
- 요소가 grid 컨테이너로 설정됩니다.
- 자식 요소들이 grid 아이템으로 동작하며, grid 레이아웃을 통해 행과 열로 배치됩니다.
inline-flex
- 요소가 flex와 같은 방식으로 동작하지만, inline 요소처럼 같은 줄에 배치됩니다.
inline-grid
- 요소가 grid와 같은 방식으로 동작하지만, inline 요소처럼 같은 줄에 배치됩니다.
✅ 참고 사이트
고양이 간식 사줄려고 개발하는 사람