안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에 만든 할 일 목록은 기능은 멋지지만, 조금 밋밋해 보였죠? 오늘은 우리 웹사이트에 멋진 옷을 입혀주는 스타일 마법을 배워볼 거예요. 상황에 따라 옷을 갈아입는 :class(v-bind:class) 마법사입니다!
1. 스타일 마법: 상황에 따라 변하는 카멜레온 옷
우리가 운동할 때는 운동복을 입고, 잘 때는 잠옷을 입는 것처럼 웹사이트의 글자나 버튼도 상황에 따라 변해야 해요. 예를 들어, 할 일을 다 끝냈다면 글자색을 흐리게 바꾸거나 줄을 긋고 싶을 거예요.
Vue.js에서는 “이 조건이 참(True)이면, 이 옷(CSS 클래스)을 입혀줘!”라고 아주 쉽게 명령할 수 있답니다. 마치 카멜레온이 주변 환경에 따라 몸 색깔을 바꾸는 것과 비슷하죠!
2. 실전 마법: 줄 긋기 마법 버튼 만들기
버튼을 누르면 글자에 줄이 쫙~ 그어지는 마법을 부려볼까요? 코드를 보면서 :class가 어떻게 작동하는지 확인해 보세요.
<style>
/* 마법 옷장: 미리 예쁜 옷들을 준비해둬요 */
.done {
text-decoration: line-through; /* 글자에 줄 긋기 */
color: #aaa; /* 색깔을 흐리게 */
}
.active {
color: #42b983; /* 생생한 초록색 */
font-weight: bold;
}
</style>
<div id="app">
<!-- :class 마법: isDone이 참이면 'done'이라는 옷을 입어요 -->
<h1 :class="{ done: isDone, active: !isDone }">
오늘의 마법 공부: {{ isDone ? '완료!' : '열심히 공부 중' }}
</h1>
<button @click="isDone = !isDone">
마법 지팡이 휘두르기 (상태 변경)
</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
Vue.createApp({
data() {
return {
isDone: false // 처음에는 아직 안 끝났어요!
}
}
}).mount('#app');
</script>
3. 우리 집 스마트 전등 만들기 응용
아이들과 함께 이 마법을 응용해 보세요. 화면에 전등 그림을 하나 그려두고, 버튼을 누를 때마다 :class="{ 'light-on': isOn }" 마법을 써서 노란색 불이 들어오게 만드는 거예요. 이렇게 하면 실제 스마트홈 앱이 어떻게 작동하는지 원리를 쏙쏙 이해할 수 있습니다.
마치며: 보기 좋은 떡이 먹기도 좋다!
이제 여러분의 웹사이트는 똑똑할 뿐만 아니라 예쁘기까지 합니다! 디자인도 코딩의 아주 중요한 부분이에요. 다음 시간에는 우리 웹사이트를 여러 페이지로 나누어 여행할 수 있게 해주는 **’마법 지도(Vue Router)’**에 대해 알아볼게요!
