자바스크립트를 활용한 CSS Grid와 Flexbox의 실시간 조정 기능 구현하기

18 Sep 2023

CSS Grid와 Flexbox는 웹 개발에서 레이아웃을 구성하는 강력한 도구입니다. 이 두 가지 기술을 조합하여 실시간으로 레이아웃을 조정하는 기능을 구현해보겠습니다.

1. CSS Grid를 사용한 실시간 조정

CSS Grid는 그리드 레이아웃을 구성하는 유연한 방법을 제공합니다. 다음은 CSS Grid를 사용하여 실시간으로 그리드 아이템의 크기를 조정하는 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        grid-gap: 10px;
        justify-content: center;
      }

      .grid-item {
        background-color: #f2f2f2;
        padding: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <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>

    <script>
      window.addEventListener("resize", () => {
        const gridContainer = document.querySelector(".grid-container");
        const gridItems = document.querySelectorAll(".grid-item");
        const containerWidth = gridContainer.clientWidth;

        gridItems.forEach((item) => {
          const itemWidth = item.offsetWidth;
          const columns = Math.floor(containerWidth / itemWidth);

          // Adjust the number of columns based on container width
          item.style.gridColumnEnd = `span ${columns}`;
        });
      });
    </script>
  </body>
</html>

위 예제에서는 브라우저의 크기가 변경될 때마다 그리드 아이템의 너비를 조정합니다. resize 이벤트 리스너를 통해 window 객체의 크기 변경을 감지하고, 그리드 컨테이너와 그리드 아이템의 너비를 계산하여 조정합니다.

2. Flexbox를 사용한 실시간 조정

Flexbox는 컨테이너와 그 안의 아이템을 유연하게 배치하는 방법을 제공합니다. 다음은 Flexbox를 사용하여 실시간으로 아이템의 크기를 조정하는 예제입니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .flex-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
      }

      .flex-item {
        background-color: #f2f2f2;
        padding: 20px;
        margin: 10px;
        text-align: center;
        flex-grow: 1;
        flex-basis: 200px;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">Item 1</div>
      <div class="flex-item">Item 2</div>
      <div class="flex-item">Item 3</div>
      <div class="flex-item">Item 4</div>
    </div>

    <script>
      window.addEventListener("resize", () => {
        const flexItems = document.querySelectorAll(".flex-item");

        flexItems.forEach((item) => {
          const itemWidth = item.offsetWidth;
          const containerWidth = item.parentNode.clientWidth;
          const columns = Math.floor(containerWidth / itemWidth);

          // Adjust the number of columns based on container width
          item.style.flexBasis = `${containerWidth / columns}px`;
        });
      });
    </script>
  </body>
</html>

위 예제에서도 resize 이벤트 리스너를 사용하여 브라우저의 크기가 변경될 때마다 아이템의 너비를 조정합니다. Flex 컨테이너의 너비와 아이템의 너비를 계산하여 조정하고, flex-grow와 flex-basis 속성을 이용해 유연한 레이아웃을 구성합니다.

이처럼 자바스크립트를 활용하여 CSS Grid와 Flexbox의 실시간 조정 기능을 구현할 수 있습니다. 좀 더 많은 스타일과 기능을 추가하여 웹페이지의 사용자 경험을 개선할 수 있습니다.

#webdevelopment #javascript #cssgrid #flexbox