71 asked

0

안녕하세요 gangsugi님.
제 강의를 열심히 들어주시고,
또 새로운 강의도 등록해주셔서 감사합니다!
아래 답변 참고해보시고, 또 궁금하신점 있으시면 질문 남겨주세요.

버튼의 스타일

버튼이 파란색에 둥근 모서리를 가진 저런 (?) 디자인인 이유는 아시다시피 CSS에 지정해둔 스타일 때문입니다. CSS 파일을 보시면, 제가 button 요소에 다음과 같은 스타일을 지정해 두었어요.

button {
  width: 100px;
  height: 35px;
  background-color: #3498db;
  color: white;
}

그러니까 결론적으로 buutton 요소는 모두 해당 스타일을 가지게 됩니다. '삭제' 버튼은 자바스크립트 파일의 addItem 함수에서 생성하게 되는데요. 제 생각에는 아무래도 요소를 생성할 때 button 요소가 아니라 다른 요소로 생성된 것 같습니다.

삭제 버튼이 생성되는 부분

function addItem(todo) {
  if (todo.text !== '') {
    const li = document.createElement('li');
    const button = document.createElement('button'); // 이 부분 체크!
    const span = document.createElement('span');

    button.innerText = '삭제';
    button.addEventListener('click', delItem);
    span.innerText = todo.text;

    li.appendChild(span);
    li.appendChild(button);
    ul.appendChild(li);
    li.id = todo.id;
  }
}

해당 부분에서, const button이 createElement('button')과 같이 생성되어야 합니다.