CSS Grid와 Flexbox는 모두 웹 개발에서 강력한 레이아웃 조정 도구로 사용됩니다. 그러나 때로는 두 기술을 혼합하여 더 복잡한 레이아웃을 구현하는 것이 필요할 수 있습니다. 이번 블로그에서는 자바스크립트를 사용하여 CSS Grid와 Flexbox를 조합하여 복합적인 레이아웃 조정 기능을 구현하는 방법에 대해 알아보겠습니다.

1. HTML 구조 작성하기

우선, 복합적인 레이아웃을 구현하기 위해 HTML 구조를 작성해야 합니다. 예를 들어, 두 개의 열로 구성된 그리드 레이아웃을 만들려고 한다고 가정해봅시다. 다음과 같이 HTML을 작성할 수 있습니다:

<div class="grid-container">
  <div class="grid-item">Item 1</div>
  <div class="grid-item">Item 2</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
</div>

2. CSS 스타일링하기

HTML 구조를 작성했다면, 이제 CSS를 사용하여 그리드와 플렉스박스를 스타일링해야 합니다. 다음은 예시 스타일링 코드입니다:

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

.grid-item {
  background-color: #e0e0e0;
  padding: 20px;
}

@media (max-width: 600px) {
  .grid-container {
    grid-template-columns: 1fr;
  }
}

위의 코드는 그리드 컨테이너를 설정하고, 두 개의 열로 구성된 그리드 레이아웃을 생성합니다. 반응형 디자인을 위해 미디어 쿼리를 사용하여 화면 너비가 600px 이하일 때는 열이 하나로 축소되도록 설정되어 있습니다.

3. 자바스크립트를 활용한 레이아웃 동적 조정

이제 자바스크립트를 사용하여 레이아웃을 동적으로 조정할 수 있습니다. 예를 들어, 버튼을 클릭하면 그리드 레이아웃의 열이 추가되는 기능을 구현한다고 가정해봅시다. 다음은 해당 기능을 구현한 예시 코드입니다:

const addButton = document.querySelector("#add-button");
const gridContainer = document.querySelector(".grid-container");

addButton.addEventListener("click", () => {
  const newItem = document.createElement("div");
  newItem.classList.add("grid-item");
  newItem.textContent = "New Item";

  gridContainer.appendChild(newItem);
});

위의 코드는 id가 “add-button”인 버튼을 클릭할 때마다 새로운 그리드 아이템을 생성하여 그리드 컨테이너에 추가합니다.

4. 결론

이렇게 자바스크립트를 활용하여 CSS Grid와 Flexbox를 조합하여 복합적인 레이아웃 조정 기능을 구현할 수 있습니다. 이를 통해 웹 페이지의 동적인 레이아웃을 구현하고 사용자 정의 기능을 추가할 수 있습니다. 유연한 레이아웃 조정이 필요한 프로젝트에 자바스크립트를 적극 활용해보세요!

#techblog #css #javascript #grid #flexbox