CSS Grid와 Flexbox는 모두 웹 페이지의 레이아웃을 조정하는 강력한 도구입니다. 이 두 기술은 각각의 특징과 장점을 가지고 있지만, 두 기술을 함께 사용하면 더욱 높은 수준의 복합 레이아웃을 구현할 수 있습니다. 이번 블로그 포스트에서는 자바스크립트를 활용하여 CSS Grid와 Flexbox를 결합하여 복합 레이아웃을 조정하는 기능을 구현하는 방법에 대해 알아보겠습니다.

1. CSS Grid와 Flexbox 설명

• CSS Grid는 그리드 기반의 레이아웃 시스템으로, 그리드 컨테이너와 그리드 아이템으로 구성됩니다. 그리드 컨테이너는 그리드 아이템들을 갖고 있는 부모 요소이며, 그리드 아이템은 그리드 컨테이너 내부에서 배치되는 자식 요소입니다. CSS Grid를 사용하면 복잡한 레이아웃을 더욱 쉽게 구현할 수 있습니다.

• Flexbox는 유연한 박스 모델 레이아웃 시스템으로, 부모 요소와 자식 요소 사이의 관계를 기반으로 요소를 배치하는 방식입니다. Flexbox를 사용하면 요소를 수평 또는 수직으로 정렬하고, 공간 배분을 할 수 있습니다.

2. CSS Grid와 Flexbox를 결합한 복합 레이아웃 구현하기

CSS Grid와 Flexbox를 함께 사용하여 복합 레이아웃을 구현하기 위해서는 먼저 그리드 컨테이너를 생성하고, 그 안에 필요한 그리드 아이템들을 배치해야 합니다. 그리드 컨테이너에는 display 속성을 “grid”로 설정하고, grid-template-columns와 grid-template-rows 속성을 사용하여 그리드의 열과 행을 정의합니다. 그리드 아이템들에는 display 속성을 “flex”로 설정하여 Flexbox를 적용할 수 있습니다.

const gridContainer = document.getElementById("gridContainer");
const gridItems = document.getElementsByClassName("gridItem");

function adjustLayout() {
  // CSS Grid 설정
  gridContainer.style.display = "grid";
  gridContainer.style.gridTemplateColumns = "repeat(3, 1fr)";
  gridContainer.style.gridTemplateRows = "auto";

  // 그리드 아이템에 Flexbox 적용
  for (let i = 0; i < gridItems.length; i++) {
    gridItems[i].style.display = "flex";
    gridItems[i].style.justifyContent = "center";
    gridItems[i].style.alignItems = "center";
  }
}

window.addEventListener("load", adjustLayout);
window.addEventListener("resize", adjustLayout);

위의 예제 코드에서는 gridContainer라는 id를 가진 요소를 그리드 컨테이너로 사용하고, gridItem이라는 클래스를 가진 요소들을 그리드 아이템으로 사용합니다. adjustLayout 함수에서는 CSS Grid와 Flexbox의 설정을 조정하며, 이벤트 리스너를 추가하여 화면 크기가 변경될 때마다 레이아웃을 조정하도록 합니다.

3. 마무리

이번 포스트에서는 자바스크립트를 활용하여 CSS Grid와 Flexbox를 결합하여 복합 레이아웃을 조정하는 기능을 구현하는 방법에 대해 알아보았습니다. CSS Grid와 Flexbox는 각각의 강점을 가지고 있지만, 함께 사용하면 더욱 다양하고 복잡한 레이아웃을 구현할 수 있습니다. 이러한 레이아웃 기능을 활용하면 웹 페이지의 디자인과 사용자 경험을 향상시킬 수 있습니다. #CSSGrid #Flexbox