js4 지금까지 배운 것을 바탕으로 To do List 구현 지금까진 강사님이 주신 레퍼런스를 바탕으로 JS 기능을 구현했었는데, 이번 기회에 시간을 내서 HTML과 CSS, JS까지 모두 혼자 구현해보기로 하였다. 부트스트랩을 쓰는게 훨씬 예쁘기는 하겠다만 ... 디자인을 최대한 노력해보며(?) 사실 색 지정이 제일 어려웠다. 이렇게 무식하게 하다보면 언젠가 실력이 늘겠지! 1. HTML To Do List 추가 header를 굳이 나눌 필요는 없어보여서 한 section으로 만들고자 했다. 간단하게 제목 부분 입력 받는 부분 리스트가 추가되는 부분 이렇게 3부분으로 나눠줬다. 여기에 CSS를 입혀준다. 2. CSS section { width: 100vw; } section .inner { box-sizing: border-box; margin: auto; p.. 2023. 2. 16. KDT 5th 웹개발자 입문 수업 15일차 1. todo 리스트 해설 createElement() -> setAttribute() -> onclick or addEventListener -> appendChild 순서로 만들어서 붙여주는 형식으로 수행 1-1. input 필드의 값은 value에 들어간다. 그러므로 입력 받은 값을 value로 읽어올 수 있다. 1-2. 체크박스의 체크됨을 확인하기 위해선 checked 프로퍼티로 boolean 확인 1-3. DOM요소에 style 프로퍼티로 직접 접근이 가능하며, 스타일 속성명의 경우 카멜형식(text-decoration -> textDecoration) 으로 접근할 수 있다 1-4. addEventListener 와 onclick 이벤트가 일어나는 대상을 접근하는 방법 addEventListen.. 2023. 2. 15. KDT 5th 웹개발자 입문 수업 13일차 1. 배열 array 순서가 있는 리스트 [ ] 안에 넣기 배열은 문자 뿐만 아니라 숫자, 객체, 함수 등도 포함이 가능 -> 다른 언어와의 차이점 let arr = [ 1, '2', true, null, undefined ]; // 배열의 선언 1-1. 배열의 접근 배열명[인덱스] 1-2. 배열값 변경 배열명[인덱스] = 값 1-3. length : 배열의 길이(개수) 즉, 배열의 마지막 인덱스는 arr.length - 1이 된다. 1-4. 배열의 마지막에 추가 : push() * 배열의 길이를 리턴해준다. 1-5. 배열의 마지막 제거 : pop() * 제거 해주는 배열의 값을 리턴해준다. 1-6. 배열의 앞에 추가 : unshift() * 배열의 길이 리턴 1-7. 배열의 앞에 삭제 : shift().. 2023. 2. 13. KDT 5th 웹개발자 입문 수업 12일차 1. 기본 연산자 1-1. % : 나머지 연산자 나머지는 나눠준 그 num보다 큰 수가 나올 수 없다는 특성을 이용한 문제가 많음 홀수 : num % 2 == 1 짝수 : num % 2 == 0 ✚ Math.floor() : 소수점 아래는 버리고 리턴 Math.ceil() ✚ Math.random() : 0.0~1.0 사이의 값을 랜덤하게 반환, 주로 * 10해서 사용 ✚ Math.sqrt() : 루트 값 리턴 ✚ Math.pow(base, exp) : base^exp 제곱 표현 ✚ Math.PI : 원주율의 유사값이 정의되어 있음 1-2. ** : 거듭 제곱 Math.pow(base, exp) 와 base**exp는 같음. 1-3. 연산자 줄여쓰기 a += b -> a = a + b a -= b -> .. 2023. 2. 10. 이전 1 다음
