3.7.2 내부 스타일

내부 스타일 방법으로 CSS를 적용할 때는 다음과 같이 SFC 파일의 구성 요소 중 하나인 <style> 태그 영역을 사용합니다.

src/App.vue

<template> 
  <h1>Internal Style</h1> 
</template> 
<style> 
h1 { 
  color: red; 
  font-style: italic; 
} 
</style>

그런데 이 방법은 스타일이 모든 컴포넌트에 공통으로 적용됩니다. CSS 속성이 사용된 컴포넌트에만 스타일을 적용하길 원한다면 <style> 태그에 scoped 속성을 함께 사용해야 합니다.