본문 바로가기
Study/CSS

CSS 기초 강의 15편: 고급 레이아웃과 애니메이션 기법

by wawManager 2024. 11. 30.
728x90

1. CSS Grid와 Flexbox 결합하기

CSS Grid와 Flexbox는 각각 강력한 레이아웃 도구이지만, 이 둘을 함께 사용하면 더욱 유연하고 복잡한 레이아웃을 쉽게 만들 수 있습니다.

예제: 복합 레이아웃 구성

아래 예제는 Grid를 메인 컨테이너로 사용하고, Flexbox를 내부 요소에 적용하여 세부 레이아웃을 구성합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>Grid와 Flexbox 결합 예제</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            gap: 20px;
            padding: 20px;
        }

        .item {
            background-color: #3498db;
            color: white;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 10px;
        }

        .flex-item {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item flex-item">
            <div>Flex Item 1</div>
            <div>Flex Item 2</div>
            <div>Flex Item 3</div>
        </div>
        <div class="item">3</div>
    </div>
</body>
</html>

코드 설명

  • Grid 레이아웃을 사용하여 3개의 열을 구성했고, 가운데 열은 2fr로 넓게 설정했습니다.
  • 가운데 열의 내부 요소는 Flexbox를 사용해 세로 정렬되도록 설정했습니다.

2. CSS 애니메이션의 고급 기법

1) animation-play-state와 animation-delay

애니메이션이 특정 이벤트에서 멈추거나 시작하도록 animation-play-state 속성을 사용할 수 있습니다. **paused**와 running 상태를 통해 애니메이션을 제어할 수 있습니다.

.box {
    width: 100px;
    height: 100px;
    background-color: #e74c3c;
    animation: slide 3s linear infinite;
    animation-play-state: paused; /* 초기 상태는 멈춤 */
}

.box:hover {
    animation-play-state: running; /* 마우스를 올리면 애니메이션 실행 */
}

@keyframes slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(200px); }
}

코드 설명

  • 마우스를 올릴 때만 애니메이션이 실행되도록 설정하여, 사용자 상호작용에 반응하는 애니메이션을 만들었습니다.

3. 반응형 애니메이션 구현

애니메이션의 속성을 CSS Custom Properties를 사용해 동적으로 조정하면, 반응형 애니메이션을 구현할 수 있습니다.

예제: 반응형 애니메이션 속도 조절

:root {
    --animation-speed: 2s;
}

@media (max-width: 768px) {
    :root {
        --animation-speed: 1s; /* 모바일 환경에서 애니메이션 속도 빠르게 */
    }
}

.animated-box {
    width: 100px;
    height: 100px;
    background-color: #9b59b6;
    animation: scaleUp var(--animation-speed) ease-in-out infinite;
}

@keyframes scaleUp {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.5); }
}

코드 설명

  • CSS Custom Properties를 사용해 애니메이션 속도를 전역적으로 설정하고, 미디어 쿼리에서 속도를 조정하여 반응형 애니메이션을 구현했습니다.

4. 애니메이션과 스크롤 연동

Scroll-triggered animations은 사용자가 페이지를 스크롤할 때 애니메이션이 발생하도록 만듭니다. JavaScript와 CSS를 결합하여 스크롤 위치에 따라 CSS 클래스를 추가하면 이러한 효과를 구현할 수 있습니다.

예제: 스크롤 위치에 따라 애니메이션 실행

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>스크롤 연동 애니메이션</title>
    <style>
        .scroll-animate {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.5s ease, transform 0.5s ease;
        }

        .scroll-animate.visible {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <div style="height: 100vh;">스크롤을 내려보세요</div>
    <div class="scroll-animate" style="height: 100px; background-color: #2ecc71;">스크롤 시 애니메이션</div>

    <script>
        const elements = document.querySelectorAll('.scroll-animate');
        const observer = new IntersectionObserver(entries => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('visible');
                }
            });
        });

        elements.forEach(el => observer.observe(el));
    </script>
</body>
</html>

코드 설명

  • IntersectionObserver를 사용해 스크롤 시 요소가 뷰포트에 진입하면 .visible 클래스를 추가하여 애니메이션이 실행되도록 설정했습니다.

5. 커스텀 애니메이션 조합 기법

CSS 애니메이션을 조합하여 다양한 시각 효과를 구현할 수 있습니다. 2개 이상의 애니메이션을 결합하여 보다 정교한 동작을 구성할 수 있습니다.

예제: 여러 애니메이션 조합하기

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.multi-animated {
    width: 100px;
    height: 100px;
    background-color: #f1c40f;
    animation: rotate 2s linear infinite, bounce 1s ease-in-out infinite;
}

코드 설명

  • animation 속성에 여러 애니메이션을 쉼표로 구분하여 적용했습니다. 요소는 회전하면서 위아래로 튕기는 동작을 동시에 수행합니다.

요약

이번 강의에서는 CSS 고급 레이아웃 기법과 복합 애니메이션을 다루어, 더욱 창의적인 웹 디자인을 구현할 수 있는 방법을 배웠습니다. Grid와 Flexbox 결합, 반응형 애니메이션, 스크롤 기반 인터랙션 등을 학습하며, CSS와 JavaScript의 조합으로 더 동적이고 정교한 페이지를 만들 수 있었습니다. 다음 강의에서는 최적화 기법과 브라우저 성능 향상에 대해 알아보겠습니다.

728x90

'Study > CSS' 카테고리의 다른 글

CSS 기초 강의 14편: 다양한 시각 효과와 CSS 트릭 활용하기  (1) 2024.11.29
CSS 기초 강의 13편: CSS와 JavaScript를 결합한 고급 애니메이션과 인터랙션  (0) 2024.11.28
CSS 기초 강의 12편: CSS 애니메이션과 인터랙션 심화  (0) 2024.11.27
CSS 기초 강의 11편: 고급 CSS 기법과 트릭 활용하기  (0) 2024.11.26
CSS 기초 강의 10편: CSS 프레임워크를 활용한 빠른 웹 페이지 제작  (0) 2024.11.25

관련글

티스토리툴바