This tutorial is from open-source community. Access the source code
이 랩에서는 간단하지만 효과적인 확대/축소 효과를 생성하여 CSS 애니메이션을 탐구해 보겠습니다. CSS 애니메이션을 사용하면 JavaScript 를 사용하지 않고도 웹 페이지에 동적 시각 효과를 추가할 수 있습니다. 이 랩을 마치면 CSS keyframes (키프레임) 및 animation properties (애니메이션 속성) 를 사용하여 웹사이트의 사용자 경험을 향상시킬 수 있는 부드러운 전환을 만드는 방법을 이해하게 될 것입니다.
애니메이션을 만들기 전에, 우리가 작업할 HTML 구조를 이해해야 합니다. 이 단계에서는 제공된 HTML 파일을 검토하고 필요한 수정 사항을 적용합니다.
편집기에서 index.html 파일을 엽니다.
파일이 비어 있거나 없는 경우, 다음 내용으로 파일을 생성합니다:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Zoom In Zoom Out Animation</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>CSS Animation Demo</h1>
<p>This box demonstrates a zoom in zoom out animation:</p>
<div class="zoom-in-out-box"></div>
</body>
</html>이 HTML 이 무엇을 하는지 이해해 봅시다:
style.css라는 외부 CSS 파일에 연결합니다.zoom-in-out-box를 가진 <div> 요소가 있다는 것입니다.변경 사항이 있는 경우 index.html 파일을 저장합니다.
이 div 요소는 애니메이션을 생성하기 위한 캔버스가 될 것입니다. 다음 단계에서는 CSS 를 사용하여 이 요소의 스타일을 지정합니다.
이제 HTML 구조가 준비되었으므로, 애니메이션 요소에 대한 기본 CSS 스타일을 만들어 보겠습니다.
편집기에서 style.css 파일을 엽니다.
파일이 비어 있거나 없는 경우, 다음 내용으로 파일을 생성합니다:
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
color: #333;
}
.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
background: #f50057;
}이 CSS 가 무엇을 하는지 이해해 봅시다:
.zoom-in-out-box에 대해 다음을 수행합니다:
이러한 변경 사항을 적용한 후 style.css 파일을 저장합니다.
진행 상황을 확인하려면 VSCode 의 오른쪽 하단 모서리에 있는 "Go Live" 버튼을 클릭합니다. 이렇게 하면 포트 8080 에서 웹 서버가 시작됩니다. 그런 다음 Web 8080 탭을 새로 고쳐 스타일이 지정된 상자를 확인합니다.
이제 웹 페이지에 작은 분홍색 사각형이 표시됩니다. 이 사각형은 다음 단계에서 애니메이션을 적용할 요소입니다.
CSS 애니메이션은 애니메이션 시퀀스 동안 요소가 가져야 하는 스타일을 지정하는 keyframes (키프레임) 을 정의하여 작동합니다. 줌 인 줌 아웃 애니메이션에 대한 keyframes (키프레임) 을 만들어 보겠습니다.
style.css 파일을 다시 열고 다음 코드를 끝에 추가합니다:@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1);
}
50% {
transform: scale(1.5, 1.5);
}
100% {
transform: scale(1, 1);
}
}이 코드가 무엇을 하는지 이해해 봅시다:
@keyframes는 애니메이션의 단계와 스타일을 정의하는 CSS at-rule (규칙) 입니다.zoom-in-zoom-out은 애니메이션에 부여한 이름입니다 (나중에 이 이름을 참조할 것입니다).0% (시작) 에서 요소는 scale(1, 1)로 정상 크기입니다.50% (중간 지점) 에서 요소는 scale(1.5, 1.5)로 크기가 1.5 배로 커집니다.100% (끝) 에서 요소는 정상 크기로 돌아갑니다.scale() 함수가 있는 transform 속성은 요소의 크기를 변경합니다.이러한 keyframes (키프레임) 을 추가한 후 style.css 파일을 저장합니다.
keyframes (키프레임) 은 애니메이션이 수행할 작업을 정의하지만, 아직 요소를 적용하지 않았습니다. 다음 단계에서는 애니메이션을 상자에 연결합니다.
이제 keyframes (키프레임) 을 정의했으므로, 애니메이션을 상자 요소에 적용해야 합니다.
style.css 파일을 다시 열고 .zoom-in-out-box 선택자를 다음과 같이 수정합니다:.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
background: #f50057;
animation: zoom-in-zoom-out 1s ease infinite;
}추가한 animation (애니메이션) 속성을 이해해 봅시다:
animation은 여러 animation (애니메이션) 속성을 한 번에 설정하는 shorthand property (단축 속성) 입니다.zoom-in-zoom-out은 keyframes (키프레임) 애니메이션의 이름입니다.1s는 애니메이션의 한 주기가 1 초 동안 지속되도록 지정합니다.ease는 애니메이션이 천천히 시작하여 속도가 빨라진 다음 다시 느려지도록 하는 timing function (타이밍 함수) 입니다.infinite는 애니메이션이 영원히 반복됨을 의미합니다.이러한 변경 사항을 적용한 후 style.css 파일을 저장합니다.
웹 서버가 이미 실행 중인 경우, Web 8080 탭을 새로 고치기만 하면 됩니다. 그렇지 않은 경우, 오른쪽 하단 모서리에 있는 "Go Live"를 클릭하여 서버를 시작한 다음 Web 8080 탭을 엽니다.
이제 분홍색 사각형이 부드럽게 줌 인 및 줌 아웃되는 연속적인 애니메이션을 볼 수 있습니다. 사각형은 원래 크기의 1.5 배에 도달할 때까지 커진 다음 정상 크기로 다시 축소됩니다. 이 주기는 무한히 반복됩니다.
다양한 animation (애니메이션) 속성을 실험하여 애니메이션을 사용자 정의해 보겠습니다. 이를 통해 이러한 속성이 애니메이션 동작에 어떤 영향을 미치는지 이해할 수 있습니다.
style.css 파일을 열고 .zoom-in-out-box 선택자를 수정하여 다양한 animation (애니메이션) 속성을 시도해 봅니다:.zoom-in-out-box {
margin: 24px;
width: 50px;
height: 50px;
background: #f50057;
animation: zoom-in-zoom-out 2s ease-in-out infinite;
/* Add a slight rotation during the animation */
border-radius: 10px;
}변경한 내용을 이해해 봅시다:
2s (2 초) 로 연장했습니다.ease-in-out으로 변경하여 애니메이션의 시작과 끝을 모두 부드럽게 만들었습니다.border-radius를 10px 로 추가했습니다.회전 효과를 추가하기 위해 keyframes (키프레임) 도 수정해 보겠습니다:
@keyframes zoom-in-zoom-out {
0% {
transform: scale(1, 1) rotate(0deg);
}
50% {
transform: scale(1.5, 1.5) rotate(45deg);
background-color: #2196f3;
}
100% {
transform: scale(1, 1) rotate(0deg);
}
}이 업데이트된 keyframes (키프레임) 정의에서:
transform 속성에 rotate() 함수를 추가했습니다.이러한 변경 사항을 적용한 후 style.css 파일을 저장합니다.
향상된 애니메이션을 보려면 Web 8080 탭을 새로 고칩니다.
이제 애니메이션은 더 느리고 (주기당 2 초), 둥근 모서리를 가지며, 줌하는 동안 회전하고, 애니메이션 중간에 색상이 변경되어야 합니다. 이는 CSS 애니메이션이 풍부한 시각적 효과를 위해 여러 속성 변경을 결합할 수 있음을 보여줍니다.
다양한 속성과 값을 더 실험하여 애니메이션에 어떤 영향을 미치는지 자유롭게 확인해 보세요.
Zoom in Zoom Out Animation (줌 인 줌 아웃 애니메이션) 랩을 완료하신 것을 축하드립니다! 이 랩에서는 다음을 배웠습니다:
이러한 CSS 애니메이션 기술은 사용자 상호 작용에 반응하거나 웹 페이지의 중요한 요소에 주의를 끌 수 있는 매력적인 사용자 인터페이스를 만드는 데 적용할 수 있습니다.
학습 여정을 계속하려면 animation-delay, animation-direction, animation-fill-mode와 같은 다른 animation (애니메이션) 속성을 탐색해 보세요. 또한 transform (변환) 외에 opacity (불투명도), position (위치), size (크기) 와 같은 다양한 CSS 속성을 애니메이션화하는 실험을 할 수 있습니다.