Vue 프레임워크에서 컴포넌트 스타일링

컴포넌트 파일에서 컴포넌트를 스타일링하려면 style 태그를 작성해야 합니다:

App.vue<script>
  
</script>
<template>
  
</template>
<style>
  
</style>

이 태그 안에 CSS 코드를 작성할 수 있으며, 해당 코드는 컴포넌트의 HTML 코드에만 적용되고 외부에는 적용되지 않습니다. 이는 편의를 위해 특별히 설계된 것입니다.

예제를 통해 살펴보겠습니다. 몇 개의 문단이 있다고 가정해 보겠습니다:

App.vue<template>
  <p>
    1
  </p>
  <p>
    2
  </p>
</template>

이 문단들을 빨간색으로 칠해 봅시다:

App.vue<style>
  p {
    color: red;
  }
</style>