Dev.Project/Todolist_project (20) 썸네일형 리스트형 [Todolist_Basic] Step 3. 동적인 부분에 대해서 사용자 경험 높이기 Step 3. 동적인 부분에 대해서 사용자 경험 높이기Step 2 에서 멈추면 사용자에 대해 너무 야박한 서비스이다. 왜냐하면, 입력하기 위해서 커서를 input 태그에 찍어야 하고, 입력을 하기 위해 다시 손을 마우스로 옮겨서 New item 이라는 버튼을 클릭해야하니 말이다! 또 새로운 값을 입력하려고 이전에 입력했던 것을 다 지워야 한다. 이를 위해 다음 세 가지를 추가로 설정해보자. 1> Enter키를 통해 값을 입력하자. 2> 웹 애플리케이션을 시작했을때 자동으로 input 태그로 커서를 위치시키자. 3> 입력을 하고 나서는 백스페이스를 입력할 필요가 없도록 입력한 값을 블록설정해주자. 이렇게 기능을 추가하는 과정에서는 코드가 추가도 되겠지만 삭제될 수도 있다. 엔터키로 입력할 것이니 더이상 버.. [Todolist_Basic] Step 2. 정적인 페이지를 어느 정도 동적으로 만들기 Step 2. 정적인 페이지를 어느 정도 동적으로 만들기 기본적인 틀을 어느 정도 잡았으니,input 태그로부터 값을 받아 append로 달아보자.그러기 위해서는 input 태그를 추가해야 한다. index.html code>12345678910111213 To do List New Item Colored by Color Scriptercs 그리고 이제 자바스크립트 코드를 보자. listItem.innerText 값에 Hello 대신에, input 태그로부터 들어온 값을 주면 될 것 같지 않은가? 일단 input 태그를 잡자. var inputText = document.getElementById(‘inputText’); 그리고 input 태그로부터 들어온 값을 받는다. 이때는 .value를 사용한다. .. [Todolist_Basic] Step 1. 기본적인 HTML / CSS / Javascript 구조 갖추기. Step 1. 기본적인 HTML/CSS/Javascript 구조 갖추기 우선, 웹 페이지 구성의 기초가 되는 html code를 구성해보자. index.html code>123456789 To do List New Item Write First item Colored by Color Scriptercs 현재는 체크 박스를 할 수 있고 없고 정도만 웹 페이지에서 우리가 할 수 있다. HTML 코드를 간략히 설명하면, To do List 라는 제목이 있고, 버튼을 추가했다. (id = “btnAdd”) 그리고 앞으로 li 태그를 추가해나갈, ul 태그를 삽입하고 id를 todolist라고 했다. 약간의 CSS를 입히고 시작하자. 그래야 진행되는 맛이 있으니까. style.css code>12345678910.. TodoList 만들기 Project_Basic Intro (HTML / CSS / JavaScript) 자바스크립트 연습 프로젝트 자바스크립트를 공부하면서 뭔가를 만들어보면서 하고 싶어졌는데,가장 유명한 것이 To do list를 만드는 것이다.검색해보니 난이도가 너무 높고, 이해도 안되고, (외국 사이트의 경우)심지어 코드를 그대로 입력했는데 동작하지 않았다.그러면서 여기 저기서 입수한 정보를 토대로 나만의 독자적인 To do list를 만들어가게 되었다. 이 포스팅은 그 프로젝트를 정리한 내용이다.정말 기초적인 내용을 연습하는 프로젝트이다. 프로젝트 대상은 누구인가?HTML과 CSS에 대한 기본적인 Markup Language에 대한 이해를 갖추주고 있고,JavaScript 이론 공부에 대해서 한 번 정도 진행된 사람 준비해야할 사항| Chrome Browser 프로젝트가 크롬을 기준으로 진행되기 때문.. 이전 1 2 3 다음
