[Udemy Vue 완벽가이드 Section2] 33. 인라인 스타일을 사용한 동적 스타일링

지금까지 보간법과 v-bind를 이용한 데이터바인딩, computed 프로퍼티나 감시자와 같은 기능을 이용한 Vue의 반응성, 이벤트 바인딩에 대해서 배웠다.

모두 꼭 알아야 할 핵심 기능들!

 

살펴봐야 할 기초적인 내용이 하나 더 있다. 바로 스타일링. 정확하게는 동적 스타일링.

Vue에서 동적 스타일링을 사용하면 event에 따른 반응으로서, 페이지 항목의 스타일을 '동적'으로 바꿀 수 있다.

 

 

#미션 : <div>요소를 클릭하면 활성화된 <div> 강조표시

이를 구현하는 방법으로는 가장 간단한 방법은 아니지만 이해하기 쉬운 방법이 있다.

 

1/ 우선 Vue.createApp으로 새로운 앱을 생성한다. 객체를 전달하고 상수에 저장한다.

앱에 mount를 호출해서 HTML 코드의 어딘가로 mounting 한다.

 

2/ Vue앱에 data 객체를 만든다. 그리고 어떤 demo의 <div>가 선택되었는지 계속 추적해보자.

각기 다른 이름으로 3개의 data 프로퍼티를 만든다.

 

index.html

<section id="styling">
  <div class="demo"></div>
  <div class="demo"></div>
  <div class="demo"></div>
</section>

 

app.js

const app = Vue.createApp({
  data() {
    return {
      boxASelected: false,
      boxBSelected: false,
      boxCSelected: false,
    };
  },
});
app.mount("#styling");

 

3/ methods객체에 method를 추가. <div>를 클릭하면 실행되도록.

메서드명을 boxSelected라고 하고, box를 매개변수로 취해보자.

const app = Vue.createApp({
  data() {
    return {
      boxASelected: false,
      boxBSelected: false,
      boxCSelected: false,
    };
  },
  methods: {
    boxSelected(box) {
      if (box === "A") {
        this.boxASelected = true;
      } else if (box === "B") {
        this.boxBSelected = true;
      } else if (box === "C") {
        this.boxCSelected = true;
      }
    },
  },
});
app.mount("#styling");

 

이제 @click을 추가해보자. (@click은 button에만 추가할 수 있는건 아니다. 어떤 HTML 요소든 click을 수신할 수 있다.)

@click이벤트가 boxSelected함수를 가리키고, 각각 인수로 'A', 'B', 'C'를 전달한다.

<section id="styling">
  <div class="demo" @click="boxSelected('A')"></div>
  <div class="demo" @click="boxSelected('B')"></div>
  <div class="demo" @click="boxSelected('C')"></div>
</section>

 

 

click을 통해 data프로퍼티의 값을 바꾼다. 하지만 여기서 살펴볼 내용은 styling.

box를 선택했을 때, 강조표시가 되도록 box테두리의 색이 변경되도록 해보자.

CSS와 CSS 클래스로 style을 설정할 수 있다. 또는 style속성으로 인라인 스타일(Inline style)을 적용해도 된다. 어느 HTML 요소에서나 적용가능한 속성. (인라인 스타일에 대한 설명은 아래 글로!)

2023.07.10 - [CSS] - HTML파일에 CSS 적용하는 방법 3가지

HTML파일에 CSS 적용하는 방법 3가지

 

<div class="demo" style="border-color:red" @click="boxSelected('A')"></div>

만약 위와 같이 인라인 스타일을 적용한다면, 일부 상황에서만 적용되는게 아니라 항상 빨간 테두리가 보인다. 즉, 동적이지 않다.

동적인 값으로 스타일을 바인딩하려면 v-bind로 바인딩 할 수 있다. v-bind:style 또는 축약어로 :style 이렇게 사용.

 

 

Vue.js에서는 style, class를 동적으로 바인딩 할 수 있다. style과 class를 동적으로 바인딩할 때, Vue에서 지원하는 특별한 구문을 사용할 수 있다. style, class 속성에 정적인 값을 제공하는 대신, object를 사용하여 동적으로 값을 제공한다.

 

이 object안에 CSS 프로퍼티명을 작성한다. '-'가 있는 프로퍼티 명은 JavaScript 객체 안에서는 안되기 때문에 작은따옴표로 래핑해야한다. 또는 '-'를 생략하고 camelCase표기법('-'를 없애고, 대신 중간 단어의 시작을 대문자로 작성)으로 작성한다.

 

그리고 'red'를 작성하거나, 또는 동적으로 만들기 위해 boxASelected를 작성한 후, 삼항연산자를 이용하여 해당 프로퍼티가 참인지 확인하고, 물음표 뒤에 'red'를 설정. 거짓인 경우를 위해 회색인 헥스 코드를 설정.

<div class="demo" :style="{'border-color': boxASelected ? 'red' : '#ccc'}"></div> <!--CSS프로퍼티에 '-'가 있으면 작은따옴표 작성해야-->
<div class="demo" :style="{borderColor: 'red'}"></div><!--camel Case로 css프로퍼티명 작성-->

 

 

아래 예시를 보면, 아직 click 전이므로 data프로퍼티의 boxASelected의 값은 false.

따라서 border-color는 '#ccc'(회색)의 상황이다.

 

<div class="demo" :style="{'border-color':'#ccc'}" @click="boxSelected('A')"></div>

 

 

위 박스를 click하면 어떤 상황이 일어날까.

순서대로 정리해보자.

 

index.html

<div class="demo" :style="{'border-color': boxASelected ? 'red' : '#ccc'}" @click="boxSelected('A')"></div>

 

app.js

const app = Vue.createApp({
  data() {
    return {
      boxASelected: false,
    };
  },
  methods: {
    boxSelected(box) {
      if (box === "A") {
        this.boxASelected = true;
      } else if (box === "B") {
        this.boxBSelected = true;
      } else if (box === "C") {
        this.boxCSelected = true;
      }
    },
  },
});
app.mount("#styling");

1) click 이벤트에 의해 method의 boxSelected('A') 함수 실행

2) boxSelected 메소드의 인수가 'A'이므로, data프로퍼티의 boxASelected의 값이 false → true로 변경

3) html 코드에 변경된 boxASelected 적용

4) style={ border-color: red } 적용

5) 박스의 border color(테두리 색)는 빨간색으로 변경

 

 

이 {'border-color' : boxASelected ? 'red' : '#ccc'} 객체구문은 Vue가 지원하는 특별한 기능으로 style속성에 사용되는 문구이다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.