Vue 스타일

Vue에서 스타일을 사용하는 방법

1. 기본 SFC에서 사용

Scoped: 스타일이 현재 컴포넌트에서만 적용됩니다.

<style scoped>
.example {
  color: red;
}
</style>

2. Style 태그에서 파일 Import

스타일 파일을 style 태그 내에서 import 할 수 있으며, 이 import도 scoped에 영향을 받습니다.

<style scoped>
@import './styles.css'; /* 해당 스타일이 scoped 내에서만 적용 */
</style>

3. Main에서 Import (전역으로)

main.js에서 스타일을 import하면 전역으로 적용됩니다.

4. 인라인 스타일

스타일 속성에 직접 값을 입력합니다.

<template>
  <div :style="{ color: textColor }">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red'
    };
  }
};
</script>

v-bind를 사용한 스타일: v-bind로 스타일을 바인딩할 때는 카멜 케이스를 사용합니다.

<template>
  <div :style="{ backgroundColor: backgroundColor, fontSize: fontSize }">Hello</div>
</template>

배열 스타일 바인딩: 여러 스타일 객체를 배열로 묶어 바인딩할 수 있습니다.

<template>
  <div :style="[styleObject1, styleObject2]">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      styleObject1: { color: 'blue' },
      styleObject2: { fontSize: '20px' }
    };
  }
};
</script>

5. 클래스 바인딩

v-bind:class를 사용하여 동적으로 클래스 이름을 바인딩할 수 있습니다.

<template>
  <div :class="{ active: isActive, 'text-red': isRed }">Hello</div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true,
      isRed: false
    };
  }
};
</script>

CSS 프레임워크와 Styled Componets를 이용해서 스타일할 수 있습니다.

6. Tailwind CSS, BootstrapVue

7. Vue Styled Components