분류 전체보기46 [JavaScript] - 그림판 만들기 ① (그리기, 굵기 조절) 그림판을 만들 때에는 canvas라는 api를 이용합니다. html에 api를 만들어 준 뒤 const ctx = canvas.getContext("2d"); getContext라는 메소드는 canvas에 2d,3d 선택지를 주는데 2d를 선택해줍니다. 그 후 JS와 CSS에 각각 width와 height 값을 줍니다. 그리고 JS에서는 변수로 만들어 줍니다. ex) const CANVAS_WIDTH = 800; const CANVAS_HEIGHT = 800; canvas.width = CANVAS_WIDTH; canvas.height = CANVAS_HEIGHT; canvas의 값을 css와 JS에 둘 다 주는 이유 : css는 canvas의 크기를 지정해주고 JS에는 canvas의 그리기 영역을 지정.. 2022. 7. 23. [JavaScript] - To Do List 만들기③ https://taehyeon-smilestudy.tistory.com/27?category=1020508 [JavaScript] - To Do List 만들기① ToDoList를 만들 때 꼭 되어야 하는 기능 1. 사용자가 값을 입력하고 새로고침을 했을 때 이전에 있던 값들을 불러올 수 있는가 2. 새로고침 후 사용자가 값을 입력할 때 기존에 있던 것에 덧씌워 taehyeon-smilestudy.tistory.com https://taehyeon-smilestudy.tistory.com/29?category=1020508 [JavaScript] - To Do List 만들기② https://taehyeon-smilestudy.tistory.com/27?category=1020508 [JavaScript.. 2022. 7. 19. [JavaScript] - To Do List 만들기② https://taehyeon-smilestudy.tistory.com/27?category=1020508 [JavaScript] - To Do List 만들기① ToDoList를 만들 때 꼭 되어야 하는 기능 1. 사용자가 값을 입력하고 새로고침을 했을 때 이전에 있던 값들을 불러올 수 있는가 2. 새로고침 후 사용자가 값을 입력할 때 기존에 있던 것에 덧씌워 taehyeon-smilestudy.tistory.com 다음은 ul의 하위 요소로 들어가는 li span button을 만들어 줍니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 function createToDo(newToDo) { const li = document.createElement("li"); li.id = n.. 2022. 7. 19. [JavaScript] - To Do List 만들기① ToDoList를 만들 때 꼭 되어야 하는 기능 1. 사용자가 값을 입력하고 새로고침을 했을 때 이전에 있던 값들을 불러올 수 있는가 2. 새로고침 후 사용자가 값을 입력할 때 기존에 있던 것에 덧씌워지는 것이 아닌 기존에 있던값+새로운값으로 리스트가 만들어지는가 3. 삭제 버튼을 눌렀을때 화면상 리스트와 localStorage의 데이터가 같이 삭제가 되는가 To Do List 진행방향 -form이 submit 될 때 실행되는 함수를 만듭니다. -사용자가 input에 넣은 값들을 배열로 저장 후 로컬스토리지로 보내고 createElement 메소드를 이용해 ul의 하위 요소인 li와 span, button을 만듭니다.(span은 input에 넣은 값을 받습니다.) -삭제 버튼을 클릭하면 클릭이벤트가 일어.. 2022. 7. 19. 이전 1 ··· 5 6 7 8 9 10 11 12 다음
