본문 바로가기

Dev.Project/Todolist_project

[Todolist_Basic] Step 1. 기본적인 HTML / CSS / Javascript 구조 갖추기.



Step 1. 기본적인 HTML/CSS/Javascript 구조 갖추기


우선, 웹 페이지 구성의 기초가 되는 html code를 구성해보자.

index.html code>
1
2
3
4
5
6
7
8
9
<body>
  <h1>To do List</h1>
  <button id="btnAdd">New Item</button>
  <ul id="todolist">
    <li><input type="checkbox"/><span>Write First item</span></li>
  </ul>
 
  <script src="main.js"></script>
</body>
cs


현재는 체크 박스를 할 수 있고 없고 정도만 웹 페이지에서 우리가 할 수 있다.
HTML 코드를 간략히 설명하면,
To do List 라는 제목이 있고,
버튼을 추가했다. (id = “btnAdd”)
그리고 앞으로 li 태그를 추가해나갈, ul 태그를 삽입하고 id를 todolist라고 했다.

약간의 CSS를 입히고 시작하자.

그래야 진행되는 맛이 있으니까. 
style.css code>
1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
   ul {
      list-style: none;
      padding:0;
      margin: 0;
      width: 500px;
   }
   ul li {
      border: 1px solid #ccc;
      background: #eee;
      padding: 5px 10px;
   }
</style>
cs



이제 자바스크립트 코드를 입력할 차례이다.
일단 저 li 태그를 이벤트를 통해 생성해야 한다.
main.js code>
1
2
3
4
5
6
7
8
9
10
var btnNew = document.getElementById('btnAdd');
btnNew.onclick = addNewItem;
 
function addNewItem(){
  var listItem = document.createElement('li');
  listItem.innerText = "Hello";
 
  var list = document.getElementById('todolist');
  list.appendChild(listItem);
}
cs


짧은 코드이니 간략한 코드 설명을 덧붙인다.
일단 id를 통해서 버튼을 잡고, onclick 이벤트를 추가해준다.
addNewItem 이라는 함수를 통해서 이벤트를 전달하는 것이다.
li 태그를 생성하는 DOM 조작 이벤트를 listItem 변수에 담아두고,
생성한 li 태그 안에 innerText라는 메소드를 통해서 문자열을 입력해준다.
그리고 appendChild 메소드를 통해 listItem을 달아주자.

여기서 살짝 리팩토링을 해주자면, 코드는 다음과 같아진다.
main.js code>
1
2
3
4
5
6
7
8
9
10
var btnNew = document.getElementById('btnAdd');
btnNew.onclick = function(){
  addNewItem(document.getElementById('todolist'));
};
 
function addNewItem(list){
  var listItem = document.createElement('li');
  listItem.innerText = "Hello";
  list.appendChild(listItem);
}
cs


이렇게 해서 Step1을 마무리했다.
현재까지, index.html 파일, style.css 파일, main.js 파일
이렇게 세 가지 파일로 나누어서 진행되었다.



- Step 1. The end -

 Step 2. 정적인 페이지를 어느 정도 동적으로 만들기. [이동]