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

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

<script>
	
</script>
<template>
	
</template>
<style>
	
</style>

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

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

<template>
	<p>
		1
	</p>
	<p>
		2
	</p>
</template>

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

<style>
	p {
		color: red;
	}
</style>

컴포넌트의 태그를 스타일링하세요.