css (5) 썸네일형 리스트형 [JavaScript] To-do List 만들기 - 3 (목록의 요소 삭제하기, 체크박스 수정) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 목록의 요소 삭제하기 [취소선 만들기]에서 썼던 addEventListener()를 사용해서 delItem이라는 함수로 목록의 요소를 삭제할 수 있도록 했다. 1. function.bind(thisArg, arg1, arg2, ···) bind 매서드를 사용하면, 함수의 컨텍스트를 변경하거나, 함수에 초기 인수를 설정하는 등의 작업을 할 수 있다. 여기에서 func.. [JavaScript] To-do List 만들기 - 2 (취소선 만들기) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 취소선 만들기 체크박스의 상태를 알 수만 있으면 checked 또는 unchecked의 상태에 따라 취소선을 긋거나 지우면 되기 때문에 크게 어려운 일은 아니었다. addEventListener() 을 사용해 체크박스의 체크여부에 따라 취소선을 그릴 수 있도록 만들었다. 1. addEventListener(eventType, callback) 웹 페이지에서 특정 이.. [JavaScript] To-do List 만들기 - 1 (박스 만들기, list의 marker로 checkbox 사용) 하고 싶은 일 1. 할 일을 입력 받음 2. 리스트에 올라감 3. 리스트의 테두리에 박스가 있었으면 좋겠음 4. 리스트의 마커가 체크박스였으면 좋겠음 5. 체크박스가 checked 상태일 때 취소선이 생김 6. 목록에 있는 할일을 삭제할 수 있는 기능이 있었으면 좋겠음 7. html 파일과 js 파일이 나눠졌으면 좋겠음(refactoring) 아래 코드는 1~4번까지 완료된 코드이다 To-Do List 리스트의 marker를 체크박스로 바꾸는 과정에서 어려움을 겪었는데, 이 문제는 CSS default로 설정되어 있는 disc 형태의 marker를 삭제하고(list { list-style-type: none; }), JS checkbox 요소를 추가해주면 된다. (for문의 createElement) 이.. [JavaScript] button과 이벤트 버튼의 이벤트 속성으로는 무조건 JS가 와야한다. 1. 버튼 만들기 을 사용하면, button을 만들 수 있다. value는 button위에 나타날 글자를 설정해줄 수 있다. 2. onclick 이벤트 onclick 을 사용하면 버튼을 눌렀을 때 일어날 이벤트를 만들어줄 수 있다. 위 코드에서는 버튼을 눌렀을 때, " button clicked! "라는 알림이 뜨도록 했다. onclick 이외에도 onchange, onselect 등 많은 이벤트들이 있다. 3. 나이트 모드와 라이트 모드 구현 나이트 모드와 라이트 모드 onclick 에 document.querySelector('body')는 'body' 태그 내에 적용할 효과라는 의미이고, .style.backgroundColor(또는 color)은 .. [JavaScript] JS vs HTML JavaScript 는 동적이다. → html 위에서 작동하며, 사용자와 상호작용한다. 1. JavaScript를 html 코드에 넣기 JavaScript 1 태그 안에 HTML 1+1 html과 JavaScript의 차이점은 JavaScript는 동적이고, html은 정적이라는 것이다. 이전 1 다음
