이번 미션은 To do list를 만드는 것.
이번 미션을 시작하기 전에 DOM에 대한 것을 자세히 알아야 한다.
DOM
DOM은 문서 객체 모델(Document Object Model)로 HTML, XML 문서의 프로그래밍 인터페이스를 말한다.
문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 도움을 준다.
웹페이지는 일종의 문서. 이 문서는 웹 브라우저를 통해 그 내용이 해석되어 웹 브라우저 화면에 나타나거나 HTML 소스 자체로 나타나기도 한다.
동일 문서를 사용해 이처럼 다른 형태로 나타날 수 있다는 점에 주목할 필요가 있음
DOM은 동일 문서를 표현하고, 저장하고, 조작하는 방법을 제공
DOM은 웹 페이지의 객체 지향 표현, JS와 같은 스크립팅 언어 이용해 DOM을 수정할 수 있음
-> 이 글을 보면 DOM은 웹페이지 문서(HTML, XML)에 구조화된 객체를 집어넣는 것을 의미하는 것으로 보인다. 그리고 DOM은 그것을 위한 연결통로(?)
일단 확실한 건 웹페이지를 HTML, CSS가 아닌 다른 언어, JavaScript나 Python으로 만들 수 있다는 것으로 보인다.
h1 태그로 To do list라는 제목을 설정하고
할 일에 대한 목록을 추가할 input 태그와 button 태그
목록을 만들기 위한 ul 태그를 추가한다.
여기서부터 JS를 통해 HTML안의 요소들과 연결을 한다.
스크립트 창에서 버튼과 리스트, input에 대한 변수를 설정하고
button을 눌렀을 경우 이벤트를 발생하도록 addEventListener를 만든다.
listitem을 선언하고 그 안에 li 요소를 추가하고, 그 li 요소에 class를 추가하고 속성을 설정한다.
