Vue.js로 간단한 할일 목록 작성하기 - 2부

에서 우리는 간단한 템플릿을 만들고 할 일 앱에 Vue.js를 추가했습니다. 이 블로그에서는 앱을 덜 추하게 만들기 위해 앱에 스타일을 추가할 것입니다. 시작하자.

먼저 styles.css 파일을 만들고 index.html 파일에 연결해 보겠습니다.

<link rel="stylesheet" href="./styles.css" />

그런 다음 styles.css 파일에 다음 코드를 추가합니다.

html {
  box-sizing: border-box;
  height: 100%;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  margin: 0;
  font-family: sans-serif;
  font-size: 16px;
  background-color: #fff;
  overflow-x: hidden;
  background-image: linear-gradient(120deg, #f6d365, #fda085);
}

#app {
  text-align: center;
}

.title {
  margin-top: 50px;
  color: #fff;
}

input {
  margin-top: 100px;
  display: inline-block;
  outline: none;
  font-size: 1.1rem;
  padding: 5px 30px 5px 5px;
  border: none;
  border-radius: 2px;
}

button {
  height: 22px;
  width: 22px;
  outline: none;
  border: none;
  font-size: 1.2rem;
  border-radius: 1px;
  background-color: #ff6f47;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: relative;
  top: 1px;
  left: -26px;
}

ul {
  width: 500px;
  margin: 50px auto 0;
  list-style-type: none;
  padding-left: 0;
  text-align: left;
}

li {
  background-color: #fff;
  margin-bottom: 16px;
  border-radius: 4px;
  padding: 10px;
  position: relative;
}

li .remove {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 22px;
  outline: none;
  border: none;
  font-size: 0.8em;
  border-radius: 1px;
  background-color: salmon;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  position: absolute;
  top: 50%;
  left: calc(100% - 28px);
  transform: translateY(-50%);
}

그런 다음 앱에 제목(입력 필드 앞에)을 추가하여 이것이 어떤 종류의 목록인지 표시합니다.

<h1 class="title">Todo List</h1>

완료 후 할일 목록에서 제거할 수 있도록 할일 제거 기능을 추가하면 좋지 않을까요? 이것을 추가합시다:

처음에는 할 일 항목에 ✖ 버튼을 추가합니다.

<li v-for="item in todolist" :key="item">
  {{item}} <button @click="remove(item)" 
  class="remove">✖</button>
</li>

이제 제거 버튼을 클릭했을 때 실행되는 제거 핸들러를 추가해야 합니다.

remove(value) {
  const filteredList = this.todolist.filter((t) => t !== value);
  this.todolist = filteredList;
}

그 후 최종 결과는 다음과 같아야 합니다.


두 번째 부분은 여기까지입니다. 다음 부분에서는 확인된 기능을 추가하고 필터링하고 localStorage를 구현하여 앱을 새로고침 방지할 것입니다. 읽어 주셔서 감사합니다. 다음 블로그에서 만나요!