diff --git a/README.md b/README.md
index 847b26b..3091d79 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,104 @@
-# js-todo-list-step1
\ No newline at end of file
+
+
+JS 투두리스트 스텝1
+자바스크립트로 구현 하는 투두리스트
+
+
+
+
+
+## 🔥 Projects!
+
+
+
+
+
+ 🖥️ 데모 링크
+
+
+이벤트 - TODOS
+
+
+ ${itemTitle.value}
+
+ `
+}
+
+const $allSelected = document.querySelector(".selected");
+const $active = document.querySelector(".active");
+const $completed = document.querySelector(".completed");
+
+$allSelected.addEventListener('click', showAll)
+$active.addEventListener('click', showTodo)
+$completed.addEventListener('click', showCompleted)
+
+function showAll() {
+ Array.from($todoList.children).forEach(
+ element => element.style.display = "block")
+ updateTodoItemsCount($todoList.childElementCount);
+}
+
+function showTodo() {
+ const completed = Array.from($todoList.children).filter(
+ element => element.classList.contains("completed"));
+ const notCompleted = Array.from($todoList.children).filter(
+ element => !element.classList.contains("completed"));
+
+ notCompleted.forEach(element => element.style.display = 'block')
+ completed.forEach(element => element.style.display = 'none')
+ updateTodoItemsCount(notCompleted.length)
+}
+
+function showCompleted() {
+ const completed = Array.from($todoList.children).filter(
+ element => element.classList.contains("completed"));
+ const notCompleted = Array.from($todoList.children).filter(
+ element => !element.classList.contains("completed"));
+
+ completed.forEach(element => element.style.display = 'block')
+ notCompleted.forEach(element => element.style.display = 'none')
+ updateTodoItemsCount(completed.length)
+}
+
+ 
+ 
+
+ 
+
+
+
로컬에서 서버 띄워서 손쉽게 static resources 변경 및 확인하는 방법
+
+로컬에서 웹서버를 띄워 html, css, js 등을 실시간으로 손쉽게 테스트해 볼 수 있습니다. 이를 위해서는 우선 npm이 설치되어 있어야 합니다. 구글에 `npm install` 이란 키워드로 각자의 운영체제에 맞게끔 npm을 설치해주세요. 이후 아래의 명령어를 통해 실시간으로 웹페이지를 테스트해볼 수 있습니다.
+
+```
+npm install -g live-server
+```
+
+실행은 아래의 커맨드로 할 수 있습니다.
+
+```
+live-server 폴더명
+```
+
+