[css]<style scoped> 해당 컴포넌트(파일)에만 css 스타일 적용하게 하는 속성 scoped

수첩에 작성해둔것 같은데

https://goodteacher.tistory.com/668#google_vignette

[vue] <style scoped>의 비밀

---

Vue 컴포넌트에서 `<style>` 태그에 작성된 CSS 스타일은 해당 컴포넌트에만 적용되도록 하기 위해 `scoped` 속성을 사용할 수 있습니다. `scoped` 속성을 사용하면 CSS 스타일이 컴포넌트의 스코프 안에 제한되어, 다른 컴포넌트의 스타일과 충돌하지 않습니다.

### `scoped` 속성
`scoped`는 CSS 스타일을 컴포넌트 내부로 제한하는 속성입니다. 이렇게 하면 컴포넌트에 적용한 스타일이 다른 컴포넌트에 영향을 주지 않으며, 전역 스타일과의 충돌을 피할 수 있습니다.

### 사용 방법
`<style>` 태그에 `scoped` 속성을 추가하면, 해당 컴포넌트에만 적용되는 스타일을 작성할 수 있습니다.

```vue
<template>
  <div class="my-component">
    <p>Hello, Scoped CSS!</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
};
</script>

<style scoped>
.my-component {
  color: blue;  /* 이 스타일은 이 컴포넌트에만 적용됩니다. */
}

.my-component p {
  font-size: 20px;  /* 이 스타일도 이 컴포넌트에만 적용됩니다. */
}
</style>
```

위 코드에서 `<style scoped>`는 스타일을 컴포넌트 내부로 제한하며, `my-component` 클래스와 해당 내부 요소들에 적용됩니다. 다른 컴포넌트는 이 스타일의 영향을 받지 않습니다.

### `scoped`의 작동 방식
Vue는 내부적으로 `scoped` 속성을 사용하여 CSS 스타일을 컴포넌트 수준으로 제한합니다. 이를 위해 Vue는 컴포넌트의 DOM 요소에 고유한 특성을 추가하고, 스타일 규칙에 이를 적용합니다. 이로써 동일한 클래스 이름이나 스타일이 다른 컴포넌트에서 충돌하거나 영향을 주지 않게 됩니다.

### 주의 사항
- `scoped` 스타일은 컴포넌트 간 스타일 분리를 가능하게 하므로, 일반적으로 권장되는 방식입니다. 그러나, 글로벌 스타일을 작성하거나 모든 컴포넌트에 적용할 스타일이 필요한 경우, `scoped`를 사용하지 않는 `<style>`을 글로벌하게 정의할 수도 있습니다.
- `scoped` 스타일을 사용하면 해당 컴포넌트의 자식 컴포넌트에는 스타일이 적용되지 않습니다. 자식 컴포넌트에도 스타일을 적용하려면 각 컴포넌트에 개별적으로 스타일을 작성하거나 글로벌 스타일을 사용할 수 있습니다.

이러한 방식으로, `scoped` 속성을 사용하면 각 Vue 컴포넌트에 독립적인 스타일링을 제공할 수 있습니다.