본문 바로가기

전체 글

 (341)
[Todolist_Basic] Step 8. 수정 버튼 사라지고 나타나게 하기 Step 8. 수정 버튼 사라지고 나타나게 하기 아 그런데 이대로 두기가 좀 그렇다. 왜냐면 수정은 어쩌다 한 번 하게 되는데 아이콘이 계속 보이고 있으니 거슬린다. 그래서 마우스를 올리면 아이콘이 나타나게 해야겠다. 일단 CSS로 가서 default visible 값을 조정하자. 일단 안보여야 하니까,hidden 으로 조정해준다. 12345.fa-pencil{ float:right; padding: 5px; visibility : hidden;}cs 마우스를 올리면… 이라는 이벤트는 mouseover 이다.listem 아이템에는 이미 ondblclick 이라는 이벤트가 바인딩되어 있다. 그렇기 때문에 addEventListener( ) 를 사용하여 이벤트를 추가해줘야 한다. 1listItem.addEv..
[Todolist_Basic] Step 7. 수정 버튼 생성하기 Step 7. 수정 버튼 생성하기 글씨 부분을 클릭해야 수정을 할 수 있는 기능은 정말 야박한 기능이다.전혀 직관적이지 않기 때문이다.그렇기 때문에 우리는 아이콘을 추가하여그 아이콘을 클릭해서 수정할 수 있도록 하자. font-awesome 이용하기>> font-awesome 에 대한 포스팅 보러가기 >> 수정하기 위한 아이콘은 왠지 연필 모양의 아이콘이 좋을 것 같아서,font-awesome 홈페이지에서 연필 모양 아이콘을 찾아왔다.아이콘을 생성하기 위해서는 i 태그를 생성해야한다. 그리고 font-awesome을 적용하기 위해서는 icon 태그에 클래스 명을 지정해야한다. .className 속성을 활용하여 해결하자. 원래는 글씨를 클릭했어야 수정이 가능했던 이벤트를 아이콘을 클릭하면 가능하도록 바꿔..
[Todolist_Basic] Step 6. Donelist 생성하기 Step 6. Donelist 생성하기 삭제하는 것은 잘못 만들었을 때 삭제하는 것으로 기능을 바꾸고, 더블클릭을 하면 Done으로 되서 Donelist로 옮기는 기능으로 수정하는게 좀 더 직관적일 것 같다. 체크박스도 디자인상 보기가 안좋다. 그래서 체크박스를 생성하지 말고, 했다는 것을 Donelist로 옮겨서 style을 적용하자.삭제 기능은 나중에 다른 아이콘을 통해 구현하자. column을 쉽게 나누기 위해 부트스트랩 그리드를 적용했다. >> 부트스트랩 그리드 관련 포스팅 >> index.html code>123456789101112131415161718192021222324 To do List Write what to do and Press Enter! Done Colored by Color ..
[Todolist_Basic] Step 5. listItem 수정하고 삭제하기 Step 5. listItem 수정하고 삭제하기 Step 들어가기 전에, totalItems 변수를 수정하자. 총 개수를 나타내기는 하지만 하나의 li 태그를 가리키는데 사용되었다. 한 문서에서 unique 한 번호를 부여할 때 사용하는 것을 id 라고 한다. 그리고 흔히들 id를 시간을 기반으로 한 난수 생성을 통해서 한다. 그래서 이번 기회에 난수 생성을 통해 id를 부여해보겠다. 12var date = new Date( );var id = "" + date.getHours() + date.getMinutes() + date.getSeconds() + date.getMilliseconds();cs이렇게 id 값을 부여한다. 앞에 “” 로 공백을 준 이유는 String 으로 인식하게하여 더 큰 수를 만..
[Todolist_Basic] Step 4. 완료된 항목을 표시하기 Step 4. 완료된 항목을 표시하기 Step 들어가기전에,, 자바스크립트에서 CSS 속성을 제어하는 방법은 .style 메소드와 함께,CSS에서 text-decoration 이라고 되어있는 속성은, textDecoration 으로 - 뒤에 있는 알파벳을 대문자로 바꿔줘서 제어한다. itemText.style.textDecoration = ‘ ‘; 이런 방식으로 말이다. 이것을 응용해보면 input 태그의 type 속성도 제어할 수 있다. input 태그를 잡아서 var에 저장한 다음에, .type = “”을 통해서 설정할 수 있는 것이다. 우리는 check box를 통해서 완료된 항목을 표시할 것이다. 그런 다음 checked된 item들에 대해서 decoration을 줘서 좀 더 보기 쉽게 할 것이다..
[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..

티스토리툴바