이번 블로그 포스트에서는 CSS Grid와 Flexbox를 조합하여 동적으로 레이아웃을 조정하는 방법을 알아보려고 합니다. 이 기능을 구현함으로써 웹 페이지의 레이아웃이 사용자의 화면 크기에 따라 유연하게 변경되는 현대적인 UI를 구현할 수 있게 됩니다.

CSS Grid와 Flexbox의 장점

CSS Grid는 그리드 레이아웃을 구현하기 위한 최신 CSS 속성입니다. 그리드 영역과 그리드 아이템을 정의하여 레이아웃을 설정할 수 있습니다. 이를 통해 복잡한 레이아웃을 구성하는 것이 간편해지고, 반응형 디자인을 쉽게 적용할 수 있습니다.

Flexbox는 한 축(주로 행 또는 열)을 기준으로 아이템을 정렬하는 레이아웃 모델입니다. 그리드 레이아웃과 달리 단일 축에 대한 레이아웃을 다루는데 특화되어 있습니다. Flexbox를 사용하면 포괄적인 조합으로 UI를 구성할 수 있으며, 아이템 간의 유연한 조정이 가능합니다.

자바스크립트를 활용한 동적 조정 기능 구현하기

자바스크립트를 사용하여 CSS Grid와 Flexbox를 활용한 동적 조정 기능을 구현해보겠습니다. 예제 코드는 다음과 같습니다.

window.addEventListener('resize', function() {
  const container = document.querySelector('.container');
  const items = document.querySelectorAll('.item');

  const containerWidth = container.offsetWidth;
  const itemWidth = items[0].offsetWidth;
  const itemCount = Math.floor(containerWidth / itemWidth);

  container.style.gridTemplateColumns = `repeat(${itemCount}, 1fr)`;

  items.forEach(item => {
    item.style.flex = `0 0 ${100 / itemCount}%`;
  });
});

위 코드는 브라우저 창의 크기가 변경되었을 때, 컨테이너의 그리드 템플릿 컬럼과 아이템의 flex 속성을 동적으로 조정하는 기능을 구현한 것입니다.

결론

CSS Grid와 Flexbox를 조합하여 복합 레이아웃을 동적으로 조정하는 방법을 자바스크립트를 사용하여 구현해보았습니다. 이를 통해 웹 페이지의 레이아웃이 사용자의 화면 크기에 따라 자동으로 조정되는 효과를 얻을 수 있습니다. 이러한 기능은 모던한 UI 구현에 필수적이며, 사용자 경험(UX)을 향상시키는데 큰 도움이 됩니다.

#CSSGrid #Flexbox