6.1 style scoped

이번시간에는 style scoped에 대해 확인해 보겠습니다. 

 

<style> 태그가 scoped 속성을 가지고있을 때, css는 현재 컴포넌트의 엘리먼트에만 적용됩니다. 

자세한 설명은 아래 url 을 확인부탁드립니다. 

 

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

범위 CSS · vue-loader

 

common.css 파일을 삭제 후 각각의 .vue 파일에 style을 적용합니다. 

 

위 내용을 확인해보면 data-v-...... 이라는 속성이 추가됩니다. 하지만 모든 태그에 동일하게 적용되지는 않고 있습니다. 

<style scope> 내의 css가 정상적으로 적용이 안되는 문제가 발생합니다. 

 

>>> Deep selectors 를 적용해서 문제를 해결했습니다. 

 

https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors

Scoped CSS | Vue Loader

 

 

 

 

 

*** 공통 ***

작업완료시 푸시/커밋/빌드/firebase배포/앱적용

1. 커밋 후 푸시

 

https://github.com/imse0109/noteApp/commit/d13a272f167948743d84aa36277ef60537c1a82f

6.1 style scoped · imse0109/noteApp@d13a272

2. 빌드

터미널 appnote > npm run build

 

***** config/index.js *****

master 브랜치

1. firebase 배포시 - 상대경로

2. 앱 배포시 - 절대경로

 

 

3, firebase 배포

터미널 appnote > firebase deploy

 

4. 앱적용

4-1. dist 폴더 내에 static/index.html 복사

4-2. 브랜치 ionic 으로 변경

4-3. www 폴더 내로 static/index.html 붙여넣기

(붙여넣기 후  ionic-app-note/www/static/css/app.css 파일내의 font 경로 수정 ../../ -> MaterialIcons 처리)

 

4-4. 터미널 ionic-app-note > cordova build

4-5. app-debug.apk 파일생성 후 폰테스트

 

 

***** 앱제작가이드 *****

1. npm i cordova -g

www.npmjs.com/package/cordova?activeTab=dependents

2. Android Studio 설치

3. Gradle 설치/환경변수 설정

gradle.org/install/

4. Android SDK 설치

developer.android.com/studio/intro/update.html#download-with-gradle