[to-do-app] TodoHeader 컴포넌트 구현

 

 

 TodoHeader 컴포넌트 구현 

componets/TodoHeader.vue

<template>
	<header>
		<h1>To Do It! ✨</h1>
	</header>
</template>

<script>
export default {};
</script>

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

style 태그에서 scoped 를 하면 글로벌하게 적용되는 것이 아니라 SPA 로 하나의 파일에만 적용이 됩니다.

css 는 cascading style sheet 로 전체로 적용이 되는데 해당 soped 키워드로 인해서 그게 무시가 되는 것입니다.

 

 

src/App.vue

<template>
	<div id="app">
		<todo-header />
		<todo-input></todo-input>
		<TodoList></TodoList>
		<TodoFooter />
	</div>
</template>

<script>
/* eslint-disable no-unused-vars */
import TodoHeader from "./components/TodoHeader.vue";
import TodoInput from "./components/TodoInput.vue";
import TodoList from "./components/TodoList.vue";
import TodoFooter from "./components/TodoFooter.vue";

export default {
	name: "App",
	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>

App.vue 파일도 css 를 적용시켜 줍니다.

 

 

결과 화면

결과 화면입니다.

 

 

 

 

 

 

vue 투두앱

vue todo

---