안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 시간을 재는 타이머 마법을 배웠죠? 오늘은 그 시간에 맞춰, 혹은 우리의 기분에 맞춰 웹사이트의 색깔과 모양을 실시간으로 바꾸는 마법의 변신술을 배워볼게요!
1. 다이내믹 바인딩: 살아있는 옷장
보통 웹사이트의 색깔은 한 번 정하면 바뀌지 않아요. 하지만 Vue.js 마법사는 :class와 :style이라는 특수한 주문을 써서 상황에 따라 옷(CSS)을 갈아입힐 수 있답니다.
- 기쁠 때: 배경을 노란색으로 바꾸고 반짝이는 효과를 줘요.
- 화날 때: 글자를 빨간색으로 바꾸고 부르르 떨리게 할 수도 있죠!
2. 마법의 스위치: { 클래스명: 조건 }
이 마법의 핵심은 ‘조건’이에요. “만약 점수가 100점이라면 ‘최고’라는 옷을 입혀줘!”라고 미리 약속만 해두면, Vue.js가 눈을 부릅뜨고 지켜보다가 점수가 되는 순간 옷을 짠! 하고 바꿔준답니다.
3. 실전 마법: 버튼을 누르면 색깔이 변하는 방
우리 방의 불을 켜고 끄는 것처럼 색깔을 바꾸는 코드를 살펴볼까요?
<script setup>
import { ref } from 'vue';
const isHappy = ref(false);
const toggleMood = () => {
isHappy.value = !isHappy.value;
};
</script>
<template>
<!-- isHappy가 true일 때만 'rainbow-mode' 옷을 입어요! -->
<div class="room" :class="{ 'rainbow-mode': isHappy }">
<h2>지금 기분이 어때요?</h2>
<button @click="toggleMood">기분 전환 마법!</button>
</div>
</template>
<style>
.room { width: 200px; height: 200px; background: grey; transition: 0.5s; }
.rainbow-mode { background: linear-gradient(to right, red, orange, yellow, green, blue); }
</style>
4. 스마트 라이프를 위한 가족 코딩 팁
아이들과 함께 ‘감정 일기장’을 만들어 보세요. 아이가 ‘슬픔’ 버튼을 누르면 화면 전체가 차분한 파란색으로 변하고, ‘즐거움’을 누르면 화사한 핑크색으로 변하게 하는 거예요. 코딩을 통해 자신의 감정을 시각적으로 표현해보는 경험은 아이들의 정서 발달과 창의력에 큰 도움을 줍니다. “코딩으로 내 방의 분위기를 바꿀 수 있어!”라는 자신감을 심어주세요.
마치며: 화려한 변신술사가 된 여러분
이제 여러분은 정지된 화면이 아니라, 사용자와 대화하며 시시각각 변하는 화려한 웹사이트를 만들 수 있게 되었습니다! 다음 시간에는 **’마법의 돋보기(Computed 심화)’**라는 주제로, 복잡한 데이터를 척척 계산해서 보여주는 더 똑똑한 계산 마법을 배워볼게요.
