Vue CSS Tutorial - 클래스 및 스타일 바인딩

Vue.js를 사용하면 CSS를 쉽게 처리 할 수 ​​있습니다. Vue 지시어를 사용하여 템플릿 내에서 클래스 및 스타일 바인딩을 모두 처리 할 수 ​​있으며 구성 요소 내에 인라인 CSS를 작성하거나 더 많은 조직을 위해 외부 CSS 파일에 연결할 수 있습니다.

이 튜토리얼에서는 Vue CSS와 관련된 모든 관련 주제를 다룰 예정입니다.

Vue에서 스코프 이해하기

 작업중인 /src/components/Skills.vue 구성 요소 파일 을 보면 아래쪽에 다음 줄이 있습니다.

<style scoped>

즉,이 구성 요소에 정의 된 모든 CSS는이 구성 요소의 템플릿에만 적용됩니다.

이를 실제로 보려면 /src/App.vue  파일을 방문 하여 다음을 입력하십시오.

<style>
  body {
    background-color: #eeeeee;
  }
</style>

저장하면 앱의 배경색이 밝아집니다.

범위  를 <style>에 추가하는 경우 :

<style scoped>

회색 배경이 사라집니다.

Vue에서 외부 스타일 시트에 연결하기

현재 2 개의 구성 요소에 대한 CSS 규칙 집합은 실제 구성 요소 내에 있습니다. CSS가 많은 경우 CSS 파일을 구분하여 구분하는 것이 더 효과적 일 수 있습니다.

이렇게하려면 Skills.vue  파일에서 다음 조정을 수행하십시오.

<style src="./Skills.css" scoped>

</style>

 다음 규칙 집합을 사용하여 같은 폴더에 Skills.css 파일을 만듭니다 .

ul {
    list-style-type: none;
}
li {
    font-weight:bold;
}

저장하고 (수동으로 새로 고침해야 할 수도 있음) 규칙 세트가 계속 적용됩니다.

이 방법을 사용하지 않으므로 src = "..를 제거  하고 Skills.css  파일을 삭제 하십시오.

Vue 클래스 바인딩

Vue의 클래스 바인딩과 스타일 바인딩은 모두 v-bind  지시문을 사용합니다 . 이 지시문을 사용하면 CSS 클래스 및 스타일이 적용되는시기와 CSS 속성 및 값과 함께 동적으로 제어 할 수 있습니다.

다음  과 같이 Skills.vue 에서 템플릿을 조정하십시오 .

<template>
  <div class="skills">
    <div class="holder">
      <ul>
        <li v-for="(data, index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
      </ul>

      <!-- Add this -->
      <div v-bind:class="{ alert: showAlert}"></div>

    </div>
  </div>
</template>

여기서는 class  속성  에 v-bind 를 사용하고 있습니다. 그런 다음  부울 showAlert  가 true 인 경우에만 경고 클래스를 값으로 삽입 합니다.

 구성 요소 로직 섹션에 showAlert 속성을 추가해 보겠습니다 .

  data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ],
      showAlert: true  // Add this
    }
  },

그런 다음  styles 섹션에 .alert 클래스를 추가합니다 .

<style scoped>
  .alert {
    background-color: yellow;
    width:100%;
    height: 30px;
  }
</style>

브라우저를 보면 노란색 사각형이 보입니다.

showAlert  가 false 인  경우에만 .alert 를 표시  하려면 템플릿의 showAlert 앞에 감탄 부호를 추가하면 됩니다.

단순한!

Vue의 다중 클래스 바인딩

v-bind를 사용하여 여러 클래스를 추가하거나 제거 할시기를 제어 할 수도 있습니다 .

템플릿 섹션을 다음과 같이 업데이트하십시오.

<div v-bind:class="{ alert: showAlert, 'another-class': showClass }"></div>

클래스와 속성을 쉼표로 구분하면됩니다. 그런 다음 구성 요소 논리에 다른 부울 속성을 정의  하고 스타일에 .another-class 를 정의합니다 .

v-bind 사용 : 객체와 클래스

구성 요소 템플릿을보다 깨끗하게 유지하려면 다음을 수행하십시오.

<div v-bind:class="alertObject"></div>

그리고 구성 요소 논리에서 :

  data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ],
      alertObject: {
        alert: true,
        // More classes here if you want..
      }
    }
  },

저장하면 노랑 .alert  클래스가 표시됩니다  . 위의 값 이 true로 설정 되어 있기 때문 입니다.

Vue 스타일 바인딩

Vue의 스타일 바인딩을 사용하면 style  속성  에 대해 v-bind 지시문을 사용하여 특정 CSS 속성을 제어 할 수 있습니다 . 

템플릿을 다음과 같이 조정하십시오.

<div v-bind:style="{ backgroundColor: bgColor, width: bgWidth, height: bgHeight }"></div>

구성 요소 논리에서 다음과 같이 조정합니다.

  data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ],
      bgColor: 'yellow',
      bgWidth: '100%',
      bgHeight: '30px'
    }
  },

자, 저장하면, 우리는 같은 결과를 볼 수 있습니다.

그러나 구성 요소 템플리트에서 작업을보다 명료하게 유지하려면 대신 다음을 수행 할 수 있습니다.

<div v-bind:style="alertObject"></div>

.. 그리고 같은 구성 요소 로직을 조정 :

alertObject: {
   bgColor: 'yellow',
   bgWidth: '100%',
   bgHeight: '30px'
}

프로젝트 스타일 지정하기

이 과정에서 계속 따라 해 본다면 간단한 프로젝트를 진행하고 있음을 알 수 있습니다. 이 시점까지는 많은 작업을 수행하지 않았으며 UI가 없습니다. 

일부 규칙 집합을 추가하여 더 나은 모습으로 보이고 계속 학습 할 수 있도록 변경해 보겠습니다.

Skills.vue  구성 요소 의 템플릿  섹션을 다음과 같이 조정합니다 .

<template>
  <div class="container">
    <div class="holder">
      <ul>
        <li v-for="(data, index) in skills" :key='index'>{{data.skill}}</li>
      </ul>
      <p>These are the skills that you possess.</p>
    </div>
  </div>
</template>

Skills.vue  구성 요소 의 스타일  섹션 에서 다음 규칙 집합을 추가하십시오.

<style scoped>

  .holder {
    background: #fff;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  ul li {
    padding: 20px;
    font-size: 1.3em;
    background-color: #E0EDF4;
    border-left: 5px solid #3EB3F6;
    margin-bottom: 2px;
    color: #3E5252;
  }

  p {
    text-align:center;
    padding: 30px 0;
    color: gray;
  }

  .container {
    box-shadow: 0px 0px 40px lightgray;
  }

</style>

그런 다음 /src/App.vue를 열고  다음 전역 CSS 규칙 세트를 추가하십시오.

<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body {
  background-color: #EEEEEE;
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
}
body, html {
  margin: 0;
  height: 100%;
}
#app {
    width: 50%;
}
</style>

이 시점에서 브라우저의 결과는 다음과 같아야합니다.