초코의 풀스택 도전기 10: CSS 애니메이션으로 웹페이지에 생동감 더하기
도입
초코는 이제 CSS로 레이아웃을 만드는 법을 배웠지만, 웹페이지가 여전히 정적이라는 느낌이 들었다.
"멘토님, 웹페이지가 꽤 잘 만들어졌는데, 아직 뭔가 좀 밋밋한 것 같아요. 더 생동감 있게 만들 수 있는 방법이 있을까요?"
멘토는 웃으며 대답했다.
"물론이지, 초코야! CSS 애니메이션을 사용하면 웹페이지가 훨씬 더 매력적으로 변할 수 있어. 요소들이 부드럽게 변하거나 움직일 수 있지. 애니메이션을 추가하면 페이지가 훨씬 더 살아있는 느낌을 줄 수 있어."
1. CSS 애니메이션이란?
멘토는 설명을 시작했다.
"CSS 애니메이션은 요소들이 자연스럽게 변하거나 움직이도록 만들어주는 기술이야. 특히, transition과 animation이라는 두 가지 주요 속성을 사용하지."
초코는 궁금해하며 물었다.
"transition과 animation은 어떻게 다른가요?"
멘토가 설명을 이어갔다.
"transition은 요소의 상태가 바뀔 때, 변화를 서서히 나타내는 거야. 예를 들어, 버튼의 색상이 즉시 바뀌는 대신, 부드럽게 천천히 변할 수 있지. 반면, animation은 더 복잡한 동작이나 반복적인 움직임을 정의할 때 사용해. @keyframes를 사용해서 여러 단계로 나누어 애니메이션을 설정할 수 있지."
2. Transition을 사용한 간단한 애니메이션
먼저 간단한 transition 예시로 시작해보자.
"우선, transition을 사용해 버튼의 색상이 부드럽게 변하도록 만들어 보자."
<style>
.button {
background-color: lightblue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
font-size: 16px;
transition: background-color 0.5s ease; /* 배경색이 0.5초 동안 부드럽게 변함 */
}
.button:hover {
background-color: darkblue; /* 마우스를 올리면 배경색이 바뀜 */
}
</style>
<button class="button">클릭해보세요</button>코드 설명:
- transition 속성을 사용해 버튼의 배경색이 변경될 때 0.5초 동안 서서히 변하게 설정했다.
- hover 상태에서 배경색을 darkblue로 설정하여, 마우스를 올릴 때 색상이 부드럽게 바뀐다.
초코는 버튼을 클릭해보고 감탄했다.
"와! 색이 부드럽게 변하니 훨씬 더 멋지네요!"
3. Animation을 사용한 더 복잡한 애니메이션
이제 animation을 사용해서 더 복잡한 애니메이션을 만들어 보자.
"자, 이제 @keyframes를 사용해서 상자가 움직이는 애니메이션을 만들어 보자."
<style>
.box {
width: 100px;
height: 100px;
background-color: lightgreen;
position: relative;
animation: moveBox 3s infinite; /* 3초 동안 반복적으로 애니메이션 실행 */
}
@keyframes moveBox {
0% {
left: 0;
background-color: lightgreen;
}
50% {
left: 200px;
background-color: yellow;
}
100% {
left: 0;
background-color: lightgreen;
}
}
</style>
<div class="box"></div>코드 설명:
- animation 속성을 사용해 상자가 왼쪽에서 오른쪽으로 이동하는 애니메이션을 설정했다.
- @keyframes로 상자의 위치와 배경색이 0%, 50%, 100%에서 어떻게 변화하는지 정의했다.
- 0%에서 상자는 왼쪽에 위치하고, 50%에서 오른쪽으로 이동하며 배경색이 yellow로 바뀐다. 100%에서 다시 원래 위치로 돌아온다.
초코는 화면에서 움직이는 상자를 보며 신기해했다.
"우와! 상자가 움직이면서 색깔도 변하는군요. 이걸 이용하면 다양한 동작을 만들 수 있겠어요."
4. CSS 애니메이션의 다양한 속성
멘토는 애니메이션에 사용할 수 있는 다양한 속성들에 대해 설명했다.
"애니메이션에는 반복 횟수나 지연 시간 같은 여러 속성을 설정할 수 있어."
<style>
.bounce {
width: 100px;
height: 100px;
background-color: coral;
position: relative;
animation: bounce 2s ease-in-out 1s infinite; /* 1초 지연 후, 2초 동안 반복 */
}
@keyframes bounce {
0% {
top: 0;
}
50% {
top: 150px;
}
100% {
top: 0;
}
}
</style>
<div class="bounce"></div>코드 설명:
- bounce라는 이름의 애니메이션은 상자가 위아래로 튀는 동작을 정의한다.
- animation: 2s ease-in-out 1s infinite;는 애니메이션이 1초 지연 후 2초 동안 진행되며, 무한 반복되도록 설정한다.
- ease-in-out은 애니메이션이 시작할 때와 끝날 때 속도를 조절해 자연스럽게 움직이는 효과를 준다.
초코는 튀어오르는 상자를 보며 감탄했다.
"정말 재밌어요! 애니메이션을 이용하면 페이지에 더 많은 생동감을 줄 수 있겠네요."
결론
초코는 CSS 애니메이션의 기본 개념과 다양한 속성을 배워, 웹페이지에 생동감을 더할 수 있게 되었다.
"이제 애니메이션을 통해 웹사이트가 더 살아 움직이는 것처럼 느껴져요!"
멘토는 미소 지으며 말했다.
"맞아, 애니메이션을 잘 활용하면 웹페이지가 훨씬 더 매력적이고 흥미롭게 변할 수 있지. 이제 너도 다양한 효과를 적용해보면서 더 복잡한 애니메이션을 만들어봐."