[Vue3] 06_스타일 적용

06 스타일 적용

스타일 역시 바인딩으로 처리할 수 있다.
코드 예시로 알아보자. (예제가 길어서 생략하여 첨부하였다.)

---

1. HTML의 스타일 적용

기존의 HTML의 스타일 적용

클래스명, 속성명 지정시 케밥 표기법으로 적용 (kebab-style)

JavaScript 표현식에서는 ‘-’ 표기가 연산자이므로 사용할 수 없음.

→ 케밥 대신에 카멜 표기법을 사용 (camelStyle)

인라인 스타일

v-bind:style = :style

데이터 속성에 자바스크립트 객체로 작성

 

객체 형태로 스타일 지정

<button :style="styleObject">테스트</button>
.
.
.
<script>
data() {
  return {
    styleObject: {
      backgroundColor: 'aqua',
      color: 'black'
    }
  }
}
</script>

 

마우스 이벤트로 동적 스타일 변경

<button
  :style="style1"
  @mouseover="overEvent"
  @mouseout="outEvent"
>테스트</button>
.
.
.
<script>
data() {
  return {
    style1: {
      backgroundColor: 'aqua',
      color: 'black'
    }
  }
},
methods: {
  overEvent() {
    this.style1.backgroundColor = 'purple';
    this.style1.color = 'yellow';
  },
  outEvent() {
    this.style1.backgroundColor = 'aqua';
    this.style1.color = 'black';
  }
}
</script>

---

2. CSS 클래스 바인딩

v-bind:class = "...” = :class=”..."

• 클래스명 문자열을 바인딩하는 방법
• true/false 값을 가진 객체를 바인딩 하는 방법

문자열로 클래스 바인딩

기본적인 단일 클래스 바인딩

<button :class="myClass">버튼</button>
.
.
.
<script>
data() {
  return {
    myClass: "buttonColor buttonLayout"
  }
}
</script>

 

배열로 여러 클래스 바인딩

<button :class="[myColor, myLayout]">버튼</button>

 

조건부 클래스 바인딩(객체 형태)

true/false 값을 가진 객체를 바인딩하는 방법

• 3항 연산자로 클래스 지정 제어 시 여러 개인 경우 복잡해짐
• 객체로 바인딩하여
  • 속성명으로 클래스 지정
  • 속성값으로 해당 클래스 적용 여부를 true/false로 지정

직접 true/false 바인딩

<button :class="{ btnColor: isColored, btnAlign: isAligned }">버튼</button>
    .
    .
    .
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script type="text/javascript">
      var vm = Vue.createApp({
        name: 'App',
          data() {
                  return {
                    isColored: true,
                    isAligned: false
                     }
                    }
      }).mount('#app');
</script>

 

v-model로 직접 조작

<style>
  .bColor {
      background-color: aqua;
      color: black;
      }
   .bLayout {
     text-align: center;
     width: 120px;
      }
   .bBorder {
     border: khaki dashed 1px;
      }
</style>

<button :class="{ bColor:setColor, bLayout:setAlign, bBorder:setBorder }">
    버튼1</button>
<p>
  <input type="checkbox" v-model="setColor" value="true" />색상<br />
  <input type="checkbox" v-model="setAlign" value="true" />정렬,크기<br />
  <input type="checkbox" v-model="setBorder" value="true" />테두리선<br />
  </p>
.
.
.
<script>
data() {
   return { setColor: false, setAlign: false, setBorder: false };
      },
</script>

 

객체 통째로 바인딩

<input type="checkbox" v-model="btnStyle.btnColor" /> 색상<br />
<button :class="btnStyle">버튼</button>

.
.
.
<script>
data() {
  return {
    btnStyle: {
      btnColor: false,
      btnAlign: false,
      btnBorder: false
    }
  }
}
</script>

---

3. 동적 스타일 바인딩

계산된 속성을 스타일 적용함.

<input
  type="text"
  v-model.number="score"
  :class="info"
/>
<img v-if="info.warning" src="..." />
.
.
.
<script>
computed: {
          info() {
            return { warning: this.score < 1 || this.score > 100 };
          },
        },
</script>

 

---

4.  마무리

스타일 바인딩을 통해서 액티브 효과도 추가하여 동적으로 스타일을 적용할 수 있다. 

잘 활용하면 좋은 UI를 만들 수 있다. 

 

vue 학습이 끝났는데 13장까지 정리가 너무 밀려있다...

자바도 배우고, 코테도 조금씩 준비해야 하는데 언제 다 쓸 지 모르겠지만 최대한 vue를 빠른 시일 내에 정리해야겠다.

오늘도 끝!!