[Vue3] style 속성 데이터 바인딩

1️⃣ :style 기본 바인딩

• CSS 속성을 직접 바인딩

<template>
  <div :style="{ fontSize: '20px', marginTop: '10px' }">
    글자 크기 20px, 위쪽 마진 10px 적용
  </div>
</template>

• 주의: CSS 속성명은 CamelCase (font-size → fontSize)로 작성해야 함

---

2️⃣ 객체로 스타일 바인딩

• 여러 개의 스타일을 적용할 때 유용

<script setup>
import { ref } from "vue";

const postStyle = ref({
  fontSize: "18px",
  color: "blue",
  padding: "10px",
});
</script>

<template>
  <div :style="postStyle">
    스타일 객체를 활용한 바인딩!
  </div>
</template>

---

3️⃣ 이미지 background-image 바인딩

• 배경 이미지 동적 바인딩 방법

<script setup>
import { ref } from "vue";

const profileImage = ref("/images/profile.jpg");
const postImage = ref("/images/post.jpg");
</script>

<template>
  <div class="profile" :style="{ backgroundImage: `url(${profileImage})` }"></div>
  <div class="post-body" :style="{ backgroundImage: `url(${postImage})` }"></div>
</template>

📌 주의:

• background-image 값은 url() 안에 넣어야 함
• ${변수} 문법은 백틱(``)을 사용하여 문자열을 만들 때 적용 가능

---

📌 정리

• :style="{ 속성: 값 }" → 스타일 동적 바인딩 가능

• :style="객체" → 여러 스타일을 한 번에 적용 가능

• background-image 바인딩 → url(${변수}) 형식으로 적용