[TIL 13] 스타일 적용

Vue.js에서의 스타일 적용 방법 3가지

1️⃣ HTML의 스타일 속성 바인딩
2️⃣ CSS 클래스 바인딩
3️⃣ 동적 스타일 바인딩
=> 스타일을 동적으로 변경하거나 조건에 맞게 바인딩할 수 있다 !

1. HTML의 스타일 속성 바인딩 (:style)

• Vue에서는 :style 디렉티브를 사용하여 인라인 스타일을 동적으로 바인딩
• :style은 객체 또는 배열 형식으로 스타일을 지정

예시: 기본 스타일 바인딩

<div id="app">
  <p :style="{ color: textColor, fontSize: fontSize + 'px' }">스타일 바인딩 예제</p>
  <button @click="changeStyle">스타일 변경</button>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        textColor: 'blue',
        fontSize: 20,
      };
    },
    methods: {
      changeStyle() {
        this.textColor = 'red';
        this.fontSize = 30;
      },
    },
  }).mount("#app");
</script>

• :style 디렉티브를 사용하여 textColor와 fontSize 값을 동적으로 바인딩
• 버튼을 클릭하면 changeStyle 메서드가 실행되어 스타일이 변경됨

---

2. CSS 클래스 바인딩 (:class)

• :class 디렉티브를 사용하여 CSS 클래스를 동적으로 바인딩
• 객체 형식 또는 배열 형식으로 CSS 클래스를 바인딩

예시: 조건부 클래스 바인딩

<div id="app">
  <p :class="{ 'red-text': isRed, 'bold-text': isBold }">동적으로 클래스 적용</p>
  <button @click="toggleClass">클래스 토글</button>
</div>

<style>
  .red-text { color: red; }
  .bold-text { font-weight: bold; }
</style>

<script>
  Vue.createApp({
    data() {
      return {
        isRed: false,
        isBold: false,
      };
    },
    methods: {
      toggleClass() {
        this.isRed = !this.isRed;
        this.isBold = !this.isBold;
      },
    },
  }).mount("#app");
</script>

• :class를 사용하여 isRed와 isBold 상태에 따라 red-text와 bold-text 클래스를 동적으로 적용
• 버튼을 클릭하면 클래스를 토글하여 스타일이 변경됨

예시: 배열 형식으로 CSS 클래스 바인딩

<div id="app">
  <button :class="[myColor, myLayout]" @click="toggleClass">테스트 버튼</button>
</div>

<style>
  .blue { background-color: lightblue; color: white; }
  .red { background-color: lightcoral; color: white; }
  .rounded { border-radius: 10px; }
  .square { border-radius: 0; }
</style>

<script src="https://unpkg.com/vue"></script>
<script>
  Vue.createApp({
    data() {
      return { myColor: "blue", myLayout: "rounded" };
    },
    methods: {
      toggleClass() {
        this.myColor = this.myColor === "blue" ? "red" : "blue";
        this.myLayout = this.myLayout === "rounded" ? "square" : "rounded";
      },
    },
  }).mount("#app");
</script>

• <button> 요소의 class 속성을 Vue 데이터 속성(myColor, myLayout)과 동적으로 연결
• @click="toggleClass" 버튼 클릭 시 toggleClass 메서드를 실행하여 클래스 변경
• `Vue의 :class 바인딩을 배열 형식으로 활용하여 동적으로 여러 개의 클래스를 적용

CSS 클래스 바인딩 방식 비교

바인딩 방식	예제 코드	설명
객체 형식 ({})	:class="{ 'red-text': isRed, 'bold-text': isBold }"	조건부로 클래스 추가/제거
배열 형식 ([])	:class="[ isRed ? 'red-text' : 'blue-text', 'underline' ]"	여러 클래스를 동적으로 적용

✅ 결론

• 하나의 상태에 따라 여러 클래스를 동시에 적용하려면 배열 형식 ([])을 사용하면 편리함
• 각 클래스에 대해 개별적인 조건을 설정하려면 객체 형식 ({})이 유용!!

---

3. 동적 스타일 바인딩 (computed)

• 동적으로 스타일을 계산하고 상태에 따라 스타일을 자동으로 업데이트할 때 computed 속성을 활용
• computed는 반응형 데이터에 따라 스타일을 캐싱하고, 상태가 바뀔 때만 다시 계산됨

예시: computed를 이용한 동적 스타일 계산

<div id="app">
  <p :style="computedStyle">이 문장은 동적으로 스타일링됩니다.</p>
  <button @click="toggleFontSize">폰트 크기 토글</button>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        fontSize: 16,
      };
    },
    computed: {
      computedStyle() {
        return {
          fontSize: this.fontSize + 'px',
          color: this.fontSize > 20 ? 'green' : 'blue',
        };
      },
    },
    methods: {
      toggleFontSize() {
        this.fontSize = this.fontSize === 16 ? 24 : 16;
      },
    },
  }).mount("#app");
</script>

• computedStyle는 fontSize 값을 기반으로 동적으로 스타일을 계산
• fontSize가 20px 이상이면 글씨 색은 green, 그 이하이면 blue로 설정됨
• 버튼을 클릭하여 폰트 크기를 변경하고, 이에 맞춰 스타일이 자동으로 업데이트됨#

---

🌱 정리

1. HTML의 스타일 속성 바인딩 (:style)

• :style을 사용하여 인라인 스타일을 객체 형태로 바인딩한다.
• 상태 변화에 따라 스타일을 동적으로 변경할 수 있다.

2. CSS 클래스 바인딩 (:class)

• :class를 사용하여 CSS 클래스를 동적으로 바인딩한다.
• 조건에 따라 클래스를 추가하거나 제거할 수 있다.

3. 동적 스타일 바인딩 (computed)

• computed를 활용해 상태를 기반으로 동적으로 스타일을 계산한다.
• 스타일 변경이 필요할 때마다 자동으로 계산되어 반영된다.
• 실전에서 많이 쓰인다?!!

이 방법들을 조합하여 Vue.js에서 스타일을 동적으로 적용할 수 있다 !