안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 우리 웹사이트를 둥글고 입체적으로 만드는 디자인 마법을 배웠죠? 오늘은 가만히 멈춰있는 웹사이트에 생명력을 불어넣는 ‘변신 애니메이션 마법(Transition)’을 배워보겠습니다. 마우스를 올렸을 때 부드럽게 색이 변하거나 커지는 효과 하나만으로도 웹사이트가 훨씬 살아있는 것처럼 느껴질 거예요!
[IMAGE_1]
1. 0.5초의 마법: transition
지금까지는 마우스를 올리면 색깔이 ‘탁!’ 하고 순식간에 바뀌었죠? 하지만 transition 마법을 사용하면 “0.5초 동안 천천히 변해라~”라고 명령할 수 있어요. 이 짧은 시간이 웹사이트를 아주 고급스럽게 만들어준답니다.
2. 커지고 변하는 마법 버튼 (코드)
마우스를 올리면 부드럽게 크기가 커지고 색깔이 변하는 마법 버튼을 만들어 봅시다.
<!DOCTYPE html>
<html>
<head>
<style>
.magic-button {
padding: 15px 30px;
font-size: 18px;
background-color: #3498db;
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
/* 1. 변신 마법 예약 (어떤걸, 몇초동안!) */
transition: all 0.5s ease;
}
/* 2. 마우스를 올렸을 때(hover)의 모습 */
.magic-button:hover {
background-color: #e74c3c; /* 빨간색으로 변신! */
transform: scale(1.2); /* 1.2배로 커져라! */
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}
</style>
</head>
<body style="display: flex; justify-content: center; align-items: center; height: 100vh;">
<button class="magic-button">나를 만져봐!</button>
</body>
</html>3. transform: “모양을 자유자재로!”
오늘의 보조 주문인 transform은 요소를 비틀거나, 회전시키거나, 크기를 조절할 때 써요.
1. scale(1.2): 크기를 1.2배 키워요.
2. rotate(45deg): 45도만큼 빙글 돌려요.
3. translate(10px, 10px): 옆으로 쏙 이동시켜요.
이 주문들을 transition과 함께 쓰면 정말 마법 같은 움직임이 만들어집니다.
[IMAGE_2]
4. 아이들과 함께하는 ‘느릿느릿 변신’ 놀이
아이와 함께 ‘슬로우 모션’ 게임을 해보세요. 아빠가 “변신!”이라고 외치면 아이가 0.1초 만에 웃는 표정을 짓게 하고, 이번에는 “transition 3초!”라고 외치면 3초 동안 아주 천천히 웃는 표정으로 변하게 하는 거죠. “컴퓨터도 이렇게 시간을 정해주면 훨씬 부드럽게 움직인단다”라고 설명해 주세요. 시간(Duration)의 개념이 디자인에 어떤 영향을 주는지 몸으로 배우게 됩니다.
마치며: 움직이는 즐거움
정지 화면이었던 우리 웹사이트가 이제 마우스의 움직임에 따라 반응하고 춤추기 시작했습니다! 정말 신기하죠? 다음 시간에는 우리 마법 학교의 대문을 장식할 ‘이미지 슬라이드 마법’의 기초를 배워보겠습니다. 여러 장의 사진이 스르륵 넘어가는 멋진 장면을 기대해 주세요. 다음 시간에 만나요!
