[CSS] display 개념 및 속성

display 

display 속성은 요소의 표시 방법을 지정하여 웹 페이지의 레이아웃을 제어하는 데 중요한 역할을 합니다.
적절한 display 속성 값을 사용하여 요소를 올바르게 배치하고 웹 페이지의 디자인을 제어할 수 있습니다.

 

display 속성의 개념

display 속성은 CSS에서 요소의 표시 방법을 지정하는 데 사용되는 속성입니다. 
display 속성은 요소를 블록(block), 인라인(inline), 인라인-블록(inline-block), 그리드(grid), 플렉스(flex)가 있다.

 

display 속성의 속성값

1. block : 요소를 블록 수준 상자로 표시합니다.
   요소는 새로운 줄에서 시작하며, 가능한 최대 가로 너비를 차지하고 수직으로 쌓입니다.
   블록 요소는 width, height, margin, padding 등의 속성을 사용하여 크기와 간격을 조정할 수 있습니다. 
   <div>, <p>, <h1>과 같은 요소들은 기본적으로 블록 요소입니다.
2. inline : 요소를 인라인 수준 상자로 표시합니다.
   요소는 새로운 줄에서 시작하지 않고, 필요한 만큼의 너비만 차지하며, 수평으로 나란히 배치됩니다.
   인라인 요소는 width, height, margin-top, margin-bottom 등의 세로 방향 속성을 조정할 수 없습니다. 
   <span>, <a>, <strong>과 같은 요소들은 기본적으로 인라인 요소입니다.
3. inline-block : 요소를 인라인 수준 상자로 표시하지만, 블록 수준 요소처럼 width, height, margin, padding 등의 속성을 사용하여 크기와 간격을 조정할 수 있습니다.
   즉, 인라인 요소와 유사한 수평 배치를 유지하면서 블록 요소의 특성을 가집니다.
4. none  : 요소를 화면에서 완전히 숨깁니다.
   해당 요소는 레이아웃에 차지하는 공간이 없으며, 표시되지 않습니다.
   주로 JavaScript를 통해 동적으로 요소를 숨기는 데 사용됩니다.
5. grid, flex : 복잡한 레이아웃을 구성하기 위해 그리드나 플렉스 박스 모델을 사용할 수 있는 속성 값입니다. 
   display: grid는 요소를 그리드 컨테이너로 설정하고, display: flex는 요소를 플렉스 컨테이너로 설정합니다.
   이러한 값은 요소들을 유연하게 배치하고 정렬하는 데 사용됩니다.