캡틴판교님의 Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex강의를 정리했습니다.
매일 20분 야금야금 Vue.js 중급 화이팅.

IDE: Visual Studio Code
크롬 뷰 개발자 도구: Vue.js devtools

---

scoped 속성

뷰 싱글파일 컴포넌트에서 제공하는 속성이다.
style 태그가 scoped 속성을 가지면, 전역적이 아니라 해당 컴포넌트 안에서만 css가 적용된다.
전역 스타일보다 우선 적용된다.

다음은 공식 문서의 scocped css 예시다

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

화면 결과

[TodoHeader.vue]

h1 태그로 제목 텍스트를 넣었다.
h1에 대하여 style scoped 를 적용했다.
바깥 여백 margin을 둔 것이 중요하다.

<template>
  <header>
      <h1>TODO it!</h1>
  </header>
</template>

<script>
export default {
}
</script>

<style scoped>
h1 {
    color: #2F3B52;
    font-weight: 900;
    margin: 2.5rem 0 1.5rem;
}
</style>

[App.vue] 전역 style

<template>
  <div id="app">
    <TodoHeader></TodoHeader>
    <TodoInput></TodoInput>
    <TodoList></TodoList>
    <TodoFooter></TodoFooter>
  </div>
</template>

<script>
import TodoFooter from './components/TodoFooter.vue'
import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'

export default {
  components: { TodoHeader, TodoInput, TodoList, TodoFooter },
}

</script>

<style>
body {
  text-align: center;
  background-color: #F6F6F6;
}

input{
  border-style: groove;
  width: 200px;
}

button { 
  border-style: groove;
}

.shadow {
  box-shadow: 5px 10px 10px rgba(0, 0, 0, 0.03);
}
</style>

---

다음 시간에는 TodoInput 컴포넌트의 할일 저장 기능을 구현한다.