자바스크립트를 사용하여 CSS Grid 레이아웃에 애니메이션 효과 주기

18 Sep 2023

CSS Grid는 웹 페이지의 레이아웃을 구성하는 데 사용되는 강력한 기술입니다. 그리드 시스템을 이용하여 요소를 조직적으로 정렬하고 배치할 수 있습니다. 이번 포스트에서는 자바스크립트를 사용하여 CSS Grid 레이아웃에 애니메이션 효과를 주는 방법에 대해 알아보겠습니다.

1. CSS Grid 레이아웃 설정하기

먼저 CSS Grid 레이아웃을 설정해야 합니다. HTML 요소에 display: grid 속성을 적용하여 그리드 컨테이너를 생성합니다. 예를 들어, 다음과 같이 작성할 수 있습니다.

<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>

CSS에서는 .grid-container에 display: grid 및 그리드 레이아웃을 정의하는 속성을 추가합니다. 예시는 다음과 같습니다.

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

위의 예시에서는 컨테이너를 3개의 열로 구성하며, 열마다 동일한 비율로 자동 조정됩니다.

2. 자바스크립트를 활용한 애니메이션 효과

이제 자바스크립트를 사용하여 CSS Grid 레이아웃에 애니메이션 효과를 주기 위해 몇 가지 단계를 따릅니다.

2.1. CSS 클래스 추가

애니메이션 효과를 주기 위해서는 자바스크립트로 CSS 클래스를 추가해야 합니다. 예를 들어, animate라는 CSS 클래스를 만들어 애니메이션 효과를 정의합니다.

.animate {
  animation-name: slide;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes slide {
  from {
    opacity: 0;
    transform: translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

2.2. 자바스크립트 이벤트 리스너 추가

자바스크립트에서 애니메이션 효과를 활성화하기 위해 이벤트 리스너를 추가합니다. 예를 들어, 버튼을 클릭할 때 애니메이션 효과를 적용하는 코드는 다음과 같습니다.

const button = document.querySelector('.button');

button.addEventListener('click', function() {
  const gridItems = document.querySelectorAll('.grid-item');
  
  gridItems.forEach(function(item) {
    item.classList.add('animate');
  });
});

위의 코드에서 .button 클래스를 가진 요소를 클릭하면, .grid-item 클래스를 가진 모든 요소에 animate 클래스가 추가되어 애니메이션 효과가 적용됩니다.

3. 결과 확인

위의 코드를 적용하면, CSS Grid 레이아웃에 애니메이션 효과가 주어집니다. 버튼을 클릭하면 그리드 아이템이 위로 슬라이드되며 페이드 인 효과가 나타납니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS Grid 레이아웃 설정 */
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: 10px;
    }

    /* 애니메이션 효과를 위한 CSS 클래스 */
    .animate {
      animation-name: slide;
      animation-duration: 1s;
      animation-fill-mode: forwards;
    }

    @keyframes slide {
      from {
        opacity: 0;
        transform: translateY(100px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </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>

  <button class="button">Animate</button>

  <script>
    /* 자바스크립트 이벤트 리스너 추가 */
    const button = document.querySelector('.button');

    button.addEventListener('click', function() {
      const gridItems = document.querySelectorAll('.grid-item');
  
      gridItems.forEach(function(item) {
        item.classList.add('animate');
      });
    });
  </script>
</body>
</html>

위의 코드를 실행하고 버튼을 클릭해보면, CSS Grid 레이아웃의 요소들이 애니메이션 효과와 함께 움직이는 것을 볼 수 있습니다.

이렇게 자바스크립트를 사용하여 CSS Grid 레이아웃에 애니메이션 효과를 주는 방법에 대해 알아보았습니다. 이를 통해 웹 페이지에서 멋진 애니메이션을 구현할 수 있습니다. #JavaScript #CSSGrid