식초의 지식보관소

Canvas 이벤트 / 2D Context / path로 좌표 연동 / 색 바꾸기 / 붓 크기 / 채우기 모드 / 이미지 저장 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109..

1. reset.css (매우 좋은 CSS 기본툴) - 검색해서 복붙 2. style.css (꾸미기 CSS) : @import "reset.css"; 맨위에 써서 연결한다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 1..

캔버스 / 컨트롤러 (붓 크기 조절 / 채우기 버튼, 저장 버튼 / 색상 버튼) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 PaintJS Fill Save Colored by Color Scripter cs

Variable (변수선언) 한 줄에 한 개씩 한다 (예시) const ... ; const ... ; const ... ; 변수에 함수 할당하는 등 다양한 표현 가능하다 =중간에 함수 넣으면 가독성이 떨어진다 =한 줄에 하나씩 변수 선언한다 String template (글자열 템플릿) ` ` 와 ${ } 를 활용한다 (2문장 처럼) Array (배열) 1. 불필요한 배열은 만들지 말자 (2문장처럼 - Array.from()배열은 삭제한다) 2. 배열을 생성하면서 바로 데이터 할당하는 경우 (사진1처럼 - API 사용해서 데이터 작성 보다는) 함수안에서 배열을 만들면서, 아이템 생성한다 (사진2처럼) 3. 배열을 만든 다음에 인덱스로 접근하기 보다는 (사진1처럼) 배열 안에 아이템들을 넣는다 (사진2처..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 //Fetch the items from the JSON file (fetch: 동적으로 받아온다) function loadItems() { return fetch('data/data.json') //경로를 지정하면 간단하게 데이터 받아온다 .then(response => response.json()) //성공하면, response 객체 전달해준다 //resopnse의 API인..

▶동적인 페이지 구성할 때, HTML 안에 데이터와 html요소(UI적 요소) 섞여 있는 것은 좋지 않다 ▶자바스크립트는 어플의 비지니스 로직 담당 : 코드가 들어있다 ▶데이터는 자바스크립트가 아닌 곳에 따로 보관하는 것이 좋다 : 백엔드, 데이터 파일 등 ▶현재 프로젝트는 백엔드가 없기 때문에, JSON에 데이터를 보관한다 ▶JSON = javascript object notation, 오브젝트와 유사하다 ▶object는 key : value로 구성된다 ▶JSON은 주석을 허용하지 않는다 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 :root { /* color */ --color-black: #3f454d; /*전체 색을 먼저 변수로 저장한다*/ --color-..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 Online Shopping Blue Yellow Pink Colored by Color Scripter cs HTML까지 완성 후 페이지

모바일 퍼스트 힌트 : 레이아웃 구조 생각하기 -레이아웃을 최소한으로 바꿔서 재배치 하는 것이 좋다 -너무 많은 미디어 쿼리로 작성하면 : 개발 힘듬, 유지 보수 힘듬, 사용자도 놀람 -2가지 레이아웃 만들 예정 Wireframe 만들기 -전반적인 구조 박스 단위로 나누어 그려 보는 것 -레이블링 : 각각의 큰 박스, 작은 박스, 아이템의 이름 정하기 영상 1. HTML 마크업 하기 -준비물 : MDN, Font Awesome, google fonts, color tool https://material.io/resources/color/#!/?view.left=0&view.right=0 Color Tool - Material Design Create and share color palettes for y..

방법 영상을 보고 감을 잡는다 > 힌트를 써놓는다 > 혼자 만들어 본다 > 해결 못한 부분 영상 보고 해결한다 영상 드림 코딩 : 반응형 헤더편 힌트 웹사이트 레이아웃 2가지 1. 넓은 너비 일 때 -네비 바 : 박스 3가지 (로고, 메뉴, 아이콘)=플랙스 박스, 양쪽 사이드&스페이스 골고루 =space-btween 2. 좁은 너비 일 때 -네비 바 : 미디어 쿼리 이용해서 박스 재배치, 박스 3가지 (로고, 메뉴, 아이콘), 플랙스박스 정렬=column 혼자 만들기 영상 보며 만들기 css 파일 연결하기 ~태그 1. HTML 구조 만들기 ~가장 큰 박스 만들기 : 시멘틱 태그 태그 : nav.navbar 탭 ~중간 3 박스 만들기 : .navbar__logo 탭, .navbar__menu 탭, .nav..