CSS에는 웹 페이지 레이아웃을 디자인하는 데 유용한 두 가지 주요 기술인 Flexbox(유연한 박스 레이아웃 모듈)와 CSS Grid(그리드 레이아웃)가 있습니다. 이들은 웹 페이지의 요소를 배치, 정렬 및 조직하는 데 사용됩니다.
Flexbox
Flexbox는 주로 1차원 레이아웃을 위해 설계되었습니다. 즉, 행 또는 열에 따라 요소를 조작하는 데 적합합니다. Flexbox는 컨테이너 내의 아이템 간 공간을 효과적으로 배분하고, 동적으로 크기를 조절할 수 있습니다.
Flexbox를 사용하려면 부모 요소에 display: flex 또는 display: inline-flex를 적용합니다. 그러면 자식 요소는 자동으로 flex 아이템이 됩니다. Flexbox는 아래와 같은 속성을 통해 제어됩니다.
flex-direction: 주 축을 설정합니다. 요소가 행으로 (row) 또는 열로 (column) 배치되는지를 결정합니다.justify-content: 주 축을 따라 요소를 어떻게 정렬할 것인지를 결정합니다.align-items: 교차 축을 따라 요소를 어떻게 정렬할 것인지를 결정합니다.flex-grow,flex-shrink,flex-basis: flex 아이템의 확장 및 축소, 기본 크기를 제어합니다.
CSS Grid
CSS Grid는 2차원 레이아웃을 위해 설계되었습니다. 즉, 행과 열 모두에 대해 동시에 요소를 조작하는 데 적합합니다. 그리드는 레이아웃을 생성하는 데 효과적인 방법을 제공하며, 행과 열의 크기, 위치를 정밀하게 제어할 수 있습니다.
CSS Grid를 사용하려면 부모 요소에 display: grid 또는 display: inline-grid를 적용합니다. 그러면 자식 요소는 자동으로 grid 아이템이 됩니다. CSS Grid는 아래와 같은 속성을 통해 제어됩니다.
grid-template-columns,grid-template-rows: 그리드의 열과 행의 크기 및 수를 정의합니다.grid-column,grid-row: 아이템의 열과 행의 시작 및 종료 위치를 정의합니다.grid-gap: 행과 열 사이의 간격을 설정합니다.justify-items,align-items: 그리드 아이템의 수평 및 수직 정렬을 제어합니다.
Flexbox와 CSS Grid는
각각의 용도에 따라 유용하게 사용될 수 있습니다. 1차원 레이아웃에는 Flexbox를, 2차원의 복잡한 레이아웃에는 CSS Grid를 사용하는 것이 일반적인 패턴입니다. 물론 상황에 따라 두 기술을 혼합하여 사용하는 것도 가능합니다.
