Vue.js에서 CSS 프레임워크와 통합하는 방법은 무엇인가요?
_____A1: 가장 기본적인 방법은 Vue 프로젝트의 메인 진입 파일(main.js 혹은 main.ts)이나 App.vue 파일에 CSS 프레임워크의 CSS 파일을 직접 import 하는 것입니다. 예를 들어, Bootstrap을 사용한다면 `import 'bootstrap/dist/css/bootstrap.min.css'`를 추가하면 됩니다. 이렇게 하면 전역 스타일로 적용되어 Vue 컴포넌트 내에서도 CSS 클래스들을 자유롭게 사용할 수 있습니다.
---
Q2: Vue CLI로 생성한 프로젝트에 CSS 프레임워크를 추가하는 방법은?
A2: Vue CLI 프로젝트에서는 `npm install` 명령어로 원하는 CSS 프레임워크 패키지를 설치한 후, `main.js` 또는 `main.ts` 파일에서 해당 프레임워크의 CSS를 import 합니다. 예시로, Tailwind CSS는 공식 문서에 따라 `tailwind.config.js` 설정과 PostCSS 설정을 추가한 뒤 `index.css`에서 `@tailwind base;`, `@tailwind components;`, `@tailwind utilities;`를 선언하고 `main.js`에 `import './index.css'`를 작성하면 됩니다.
---
Q3: CSS 프레임워크의 자바스크립트 플러그인(JS)도 Vue에서 사용하려면 어떻게 해야 하나요?
A3: 프레임워크에 따라 다르지만, Bootstrap 같은 경우 `bootstrap.bundle.min.js` 같은 자바스크립트 플러그인을 import 하거나 `index.html`에 CDN 스크립트를 추가할 수 있습니다. Vue 컴포넌트에서 직접 제어하려면 `mounted()` 훅에서 플러그인 초기화를 추가하거나, Vue 플러그인 형태로 래핑된 라이브러리를 사용하는 것이 좋습니다.
---
Q4: Vue 단일 파일 컴포넌트(SFC) 내에서 CSS 프레임워크를 일부만 적용할 수 있나요?
A4: CSS는 전역 적용 방식이나 scoped 스타일 방식을 혼용할 수 있습니다. CSS 프레임워크 자체는 보통 전역 스타일이지만, 필요하면 컴포넌트 내 `