자식 컴포넌트의 CSS(SCSS)를 정의할 수 있는 딥셀렉터(v-deep) 설정하는 방법

Vue 프로젝트를 진행하다 보면 vuetify나 quasar 등 매우 다양한 프레임워크나 컴포넌트를 사용하게 됩니다. 그러면서 그 컴포넌트를 내 Vue 프로젝트의 자식 컴포넌트로 불러와서 사용하는 경우가 있는데 그 컴포넌트를 어떻게 CSS를 적용해서 내 입맛에 맞추어 스타일을 변경하고 싶으나 그게 생각처럼 되지 않는 경우가 있습니다. 그걸 되게 하는 방법을 설명해 보려고 합니다. 자식 컴포넌트의 CSS에 쉽게 접근이 되지 않는 이유이렇게 되는 이유는 웹 컴포넌트의 중요한 측면인 스타일 캡슐화때문이라고 합니다. 다시말해서 현재 컴포넌트에 적용된 css(scss)가 현재의 컴포넌트에만 적용되고 다른 컴포넌트에는 간섭이 되지 않도록 하기 위함이라고 보시면 됩니다. 그래서 Vue컴포넌트에서 그런데 scoped를..