CSS Grid와 애니메이션을 조합하여 웹 페이지에 동적인 효과를 부여하는 방법을 알아보겠습니다. CSS Grid는 웹 페이지 레이아웃을 만들기 위한 강력한 도구로, 그리드 컨테이너와 그리드 아이템으로 구성됩니다. 자바스크립트는 이러한 그리드 아이템에 애니메이션을 추가하고 상호작용을 구현하는 데 사용될 수 있습니다.
CSS Grid 기본 설정
먼저 CSS Grid를 설정하겠습니다. 아래 코드는 3x3 그리드를 생성하는 기본 설정입니다.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
}
위 코드에서 grid-template-columns와 grid-template-rows를 사용하여 그리드의 열과 행의 크기를 정의합니다. 1fr은 그리드 아이템의 공간을 동등하게 분할하는 단위입니다. 따라서 위 코드는 3개의 열과 3개의 행으로 구성된 그리드를 생성합니다.
애니메이션 추가하기
다음으로, 각 그리드 아이템에 애니메이션 효과를 추가하도록 하겠습니다. 아래 코드는 .grid-item 클래스를 가진 그리드 아이템에 움직이는 애니메이션을 적용하는 예시입니다.
.grid-item {
animation: move 2s infinite alternate;
}
@keyframes move {
0% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
위 코드에서 .grid-item 클래스는 애니메이션 효과를 적용할 그리드 아이템을 선택하는 데 사용됩니다. animation 속성은 move라는 이름의 애니메이션을 2초 동안 반복하며, 왕복으로 움직이도록 지정합니다.
또한 @keyframes를 사용하여 애니메이션의 시작과 끝 상태를 정의합니다. 위 코드에서는 0% 상태에서 transform: translateX(0);를 적용하여 아이템을 처음 위치에 배치하고, 100% 상태에서 transform: translateX(100%);를 적용하여 아이템을 오른쪽으로 100% 이동시킵니다.
JavaScript를 활용한 상호작용
이제 자바스크립트를 사용하여 그리드 아이템에 상호작용을 구현해보도록 하겠습니다. 아래 코드는 마우스가 그리드 아이템 위로 이동할 때 아이템에 효과를 부여하는 예시입니다.
const gridItems = document.querySelectorAll('.grid-item');
gridItems.forEach(item => {
item.addEventListener('mouseover', () => {
item.classList.add('highlight');
});
item.addEventListener('mouseout', () => {
item.classList.remove('highlight');
});
})
위 코드에서 querySelectorAll을 사용하여 .grid-item 클래스를 가진 모든 그리드 아이템을 선택합니다. forEach를 사용하여 각 아이템에 이벤트 리스너를 추가하여 마우스 이벤트를 감지합니다.
마우스가 그리드 아이템 위로 이동할 때 mouseover 이벤트가 발생하면 highlight 클래스를 추가하여 효과를 부여합니다. 마우스가 아이템에서 벗어나면 mouseout 이벤트가 발생하고 highlight 클래스를 제거합니다.
이러한 방법으로 CSS Grid와 애니메이션을 활용하여 웹 페이지에 동적인 효과를 부여할 수 있습니다.