CSS에서는 Flexbox와 Grid를 사용하여 웹 페이지의 레이아웃을 만들 수 있습니다. 이 두 기술은 다양한 화면 크기 및 디바이스에 대한 레이아웃을 쉽게 설계하고 관리할 수 있게 해줍니다.

Flexbox 레이아웃

Flexbox는 요소를 한 줄 또는 여러 줄에 걸쳐 정렬하는 데 사용됩니다. 이를 통해 요소들을 수평 또는 수직으로 정렬하거나 중앙 정렬하는 등 다양한 레이아웃을 만들 수 있습니다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

위 코드에서 display: flex는 Flexbox 레이아웃을 사용하겠다는 것을 정의합니다. justify-content 및 align-items 속성을 활용하여 요소들을 정렬할 수 있습니다.

Grid 레이아웃

Grid는 2차원(행과 열) 레이아웃을 만드는 데 사용됩니다. 그리드를 사용하면 요소를 간단하게 배열하고 정렬할 수 있으며, 반응형 디자인에 적합합니다.

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

위 코드에서 display: grid는 그리드 레이아웃을 사용하겠다는 것을 정의합니다. grid-template-columns 속성을 사용하여 열의 크기와 개수를 정의하고, grid-gap 속성을 사용하여 그리드 간격을 정의합니다.

이러한 Flexbox와 Grid 레이아웃을 적절히 조합하여 복잡한 레이아웃을 만들 수 있습니다. 이는 웹 페이지의 디자인과 사용자 경험을 향상시키는 데 도움이 될 것입니다.