컴포넌트만의 스타일 style scoped

글 목록 컴포넌트에서 제목인 h2 태그에 category class를 넣어보겠습니다.

html

PostList.vue

      <template>
  <main class="post-list">
    <h2 class="category">카테고리 : {{ selectedCategory }}</h2>
		<!-- ... -->
  </main>
</template>

class를 추가했을 뿐인데 스타일이 이상하게 바뀌었습니다.

이 스타일은 메뉴바에 있던 스타일이 적용된 결과입니다. 컴포넌트 내에서 스타일을 사용하더라도 해당 스타일은 모든 컴포넌트에 적용됩니다. 컴포넌트에서 설정한 스타일은 <head> 태그 안에 들어있습니다.

컴포넌트 내에서만 적용되게 하려면 style에 scoped를 추가해주면 됩니다.

Style scoped

적용 방법은 매우 간단합니다. scoped를 추가하는 겁니다.

html

Category.vue

      <style scoped>
/* ... */
</style>

MenuBar.vue에 적용해보겠습니다.

html

MenuBar.vue

      <style scopded>
.menu {
  background-color: #444;
  font-weight: bold;
  padding: 8px 10px;
  border-radius: 5px;
}
/* ... */
</style>

다시 원래대로 돌아왔습니다.

HTML 쪽 태그를 보니 특정 속성이 추가되어 있습니다.

style에서도 마찬가지 입니다. 이런 식으로 특정 속성을 기준으로 선택해서 스타일을 적용합니다.

따라서 컴포넌트에만 적용하고 싶은 스타일이면 scoped를 추가해주세요.

      Q] 그럼 항상 scoped를 사용하면 되겠네요?

A] 아니요. CSS 선택자는 태그나 속성을 사용하는 것보다 class나 id를 사용할 때 몇 배 더 빠릅니다. 따라서 되도록이면 게 하면서 class를 사용하는 것이 더 좋습니다.