titleInput 숨겼으니까 다시보여주기
시작태그가 있으면 끝태그가 꼭 있음.
: 없어도 브라우저가 알아서 해주지만 그렇게하지말고
꼭 끝맺음을 맺어라.
이제 취소버틍
인라인스타일이 들어가면 나중에 외부에서 바꿀수없다.
취소버튼이 편집전에는 안보였다가 편집하라고하면 보이도록하자.(CSS로 해야해)
아니면 이스케이프로 해서 나가버릴까?
HTML태그 안에 주는 CSS 인라인스타일은 다른경우보다 우선하니까 고민 .
CSS 다루기 어려운부분 잘알고 익숙햊야한다
동적으로 버튼 생성 - 변경,삭제
조심! 변경버튼이 여러개 생김
1) 버튼에 ID부여하는게 가장 좋음.(버튼 여러개, id이름뒤에 인덱스번호를 붙인다.
모든 버튼에 id 여러개 줄수있음
2)클래스를 준다.
3) 전략이 되게 많아. 어떻게 다루느냐 문제
변경버튼을 눌렀을 때 , 같은 tr에 속해있는 td를 제어하는 방법 여러개 어떤걸 선택할까.
현업에서는 어떤 방법들이 나올까.
코드정리해보자. : 태그를 콘트럴하는 다양한방법 그 모든방법을 다 연습할 순없지만 다양하게 해보자
태그를 찾는 방식 정리 . tr을 먼저 찾는게 쉬움.(부모태그)
tr.setAttribute("data-no", i);
// tr 태그를 구분가능
${todoList[i].title}
스팬태그 - 콘텐트를 딱 집을때 쓴다.
var titleTd = document.querySelector(`tbody td[data-no="${no}"]`);
var titleSpan = document.querySelector(`tr[data-no="${no}"] span`); 자손중에서 찾아라.
여러개라면 class(그룹임으로 중복되도됨)를 준다. (책을 읽다가 구분하기 위해 라벨을 붙이는 것처럼 구분자붙이는 것)
체크표시했을때 서버로보는는건 끝냈다.
변경버튼
var titleSpan = document.querySelector(`tr[data-no="${no}"] td.todo-title`);
몇번째 자식css를 찾아도되지만 - 컬림이 추가되면 2,3로 밀려날 수도있으니까 잘안씀
라벨을 붙이는게 좋음
input박스를 absolute를 써서 공중부양시키는 경우있음, 그때는 부모자식이 안먹혀
태그에 속성을 활용해서 언제나 편한방법(자유롭게 생성
부모가 있지만 내가 편한방식대로 하겠다.
변경버튼 누른후, escape 누르면 원래대로 변경
몇번인지 알아야함.
공통코드를 만들어 호출하는 방식을 쓰면- 중복을줄일 수 있따.
현업에서는 자바스크립트코드가 얼마나 복잡하겠나.
멋지게 만드는게 목표가 아니다.
자바쪽 클래스활용법- 데이터타입정의
arryList
to-do 돔api 사용, 이벤트처리
개발자는 남이 만든 프로그램 많이 써봐야된다.
실제뭔가를 만들어봐야 는다. 만든는게 중요한게 아니라 만들면서 그 과정을 습득
UX - 사용자편의성 고려 : 사용자가 편의하게 만들기 위해서 입력박스를 위에뒤고 포커스를 인풋박스에 둔다.
UI - 기능을 수행하는데 문제가 없는 상태 - 입력화면이 위에있든 상관없음
이해가 안되는 부분이 있다면 거기를 다시공부
처음부터 쭉 쳐보는 것도 방법
ㄴㅇㄹㄴㄹㄴㅇㄹ
