#40 VUE - 스타일링 한개에 컴포넌트에만 적용하기

<style>
/* 전역 스타일 */
</style>

<style scoped>
/* 로컬 스타일 */
</style>

Vue Cli 는 컴포넌트 단위로 웹을 구성하여 만드는 React다음으로 유명한 프레임워크다.

 

컴포넌트들로 웹을 만들면 여럿 장점이 있지만, 모달창, 스낵바 등을 재사용할 수 있다는 장점이 가장 주된 이유일 것이다.

 

하지만 CSS를 이용해서 스타일링을 하게되면, 나도 모르게, 혹은 팀원 공교롭게 나와 같은 클래스이름을 지은 다른 컴포넌트들의 스타일링도 바뀌는 것을 목격했다. 

 

웹의 서비스가 점점 커지다보면, 계속해서 새로운 이름을 만드는 것이 생각보다(?) 어려운 일이 된다.

 

---

따라서 이를 해결하기 위해,

 

<style scoped>

</style>

 

라는 "scoped"를 style태그를 사용하게 된다면, 해당 컴포넌트에서만 css를 사용할 수 있게 된다.

 

 

 

 

관련 소스는

vue-loader-v14.vuejs.org/kr/features/scoped-css.html

범위 CSS · vue-loader