https://taehyunkim3.github.io/JS30/drum.html Bootstrap demo taehyunkim3.github.io 타이틀이 bootstrap demo인건 왜 안바뀔까 마우스 오버를 하면 키보드 동작과 동일한 비주얼을 보여주도록 수정하고, 마우스가 오버되어 있는 경우 transitionend를 듣는 eventlistener를 해당 키만 잠시 비활성화. A click S click2 D keyboard F metalic G moneybag H perc J coin K duck L button ; bell
조금 더 수정을 해보았다. 입체를 너무 해보고 싶어서, 한번 적용해보았다. 참고한 사이트는 코드펜 프로젝트이며 하단에 첨부했다. https://taehyunkim3.github.io/JS30/index.html https://taehyunkim3.github.io/JS30/index.html taehyunkim3.github.io 기존 평면 입체효과 변경 후. 그림자 효과가 약간 부자연스럽긴 함. 키보드 버튼을 누르면 위로 올라오면서 색상 변경. 요거 보고 수정해서 적용해보았다. https://codepen.io/poppe1219/pen/oNdzaw Mobile menu, CSS only Having fun and learning some CSS3 animations and transitions. Ins..
transition을 주면서 html요소를 보여주고 숨기려면, display block, display none으로는 애니메이션이 안먹는다. display대신에 visibility: hidden; visibility: visible; 이 속성과 opacity:0 opacity:1을 같이 사용해주면 된다. .modal-background.show { /* display: block; */ visibility: visible; opacity: 1; } .modal-background { /* display: none; */ visibility: hidden; background-color: rgba(0, 0, 0, 0.8); position: fixed; bottom: 0; right: 0; top: 0; ..
.modal__background{ position: fixed; top:0; left: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, 0.8); } .modal__box{ position: absolute; top: calc(50vh - 100px); left: calc(50vw - 200px); background-color: white; display: flex; justify-content: center; align-items: center; border-radius: 10px; width: 400px; height: 200px; } 이렇게하고 Hello, this is modal window 이렇게 아래는 애플코딩에서 연습했던 부분. hello X Na..
자바스크립트에서 html을 조작하는 방법은 정말 여러가지가 있는데 그중 입력을 기준으로 세가지 방법을 비교해보겠습니다. textContent textContent는 CSS요소를 고려하지 않기 때문에 가장 빠르지만, 읽을때 이야기이고, 쓸때는 결국 다른 요소들의 높이, 위치에 영향이 있기 때문에 CSS를 다시 그리는 reflow가 들어가게 됩니다. Hello! World! document.getElementById('sample').textContent = 'HiThere!!'; //화면출력 //Hi!There!! textContent로 입력을 하면 해당 요소의 하위 요소가 모두 싹 지워지고 입력값은 모두 텍스트로만 인식되어 채워지게 됩니다. 따라서 하위 태그가 있는 경우 사용이 불가능합니다. 하지만 읽어..
버튼만들기 let [좋아요, set좋아요] = useState(0); // 중략 // 아래 html은 return내부에 작성!! {제목[0]} { set좋아요(좋아요 + 1) }}>👍 {좋아요} 2월 11일 발행 onclick 아니라 onClick임! onClick={함수가 들어감!} state를 변경하려면, state변경함수가 들어가야함. 여기서는 set좋아요(새로운state) (새로운 state로 싹 갈아줌) import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 ..
한번 다시 들어보는 코딩애플의 html 기초 html 은 자료의 구조를 표현하기 위한 마크업 언어임. 어떤 역할을 하는지 항상 알려줘야하고, 웹표준을 잘 지키는 것. 글 본문 글 제목 링크 버튼 리스트 리스트 CSS 간단하게 삽입할 경우 글자 자주 사용하는 글자 스타일들. font-size : 20px; font-family : 'gulim'; color : black; letter-spacing : -1px; text-align : center; font-weight : 600; 이미지 크기, 가운데 정렬 display : block; margin-left : auto; margin-right : auto; width : 150px; 텍스트 일부만 변경 안녕하세요 저는 뛰어난 개발자입니다. 참고 : s..
리엑트 설치 sudo npx create-react-app reacttodo(name) cd reacttodo(name) 부트스트랩설치 sudo npm install react-bootstrap bootstrap 리엑트 아이콘 설치 https://react-icons.github.io/react-icons npm install react-icons --save scss 설치 https://sunnyfterrain.github.io/devlog/tips-react-scss.html sudo npm install node-sass styled components 설치 최근 오류로 아래 버전 명시 필요 sudo npm install styled-components@5.3.10 권한수정 pwd (경로 알아내기)..
JS에서 number, string, boolean, null, undefined 를 제외한 모든 값은 object임. (원시타입과 객체타입 로 구분해서 칭함.) 원시타입은 값 변경이 불가능하고, 값을 수정하면 항상 새로운 값이 덮어씌워짐. 즉, string을 변경할수는 있지만, string[1]처럼 string의 일부는 불러올수는 있지만 일부만 수정은 불가능하다. 반면 객체타입은 포인터처럼 데이터가 저장된 메모리의 주소값을 가지고 있고, 데이터 일부 변경이 가능하다. 다만, 객체타입을 복사할때 얕은복사, 깊은복사를 주의해서 다루어야 한다. 주소값만 복사할 경우 원본 데이터가 수정되면 복사된 데이터도 수정이 됨. 앝은복사 깊은복사는 아래 링크에 잘 정리되어 있음 https://hanamon.kr/java..
부모안에 있는 자식들에게 동일한 이벤트를 각각 등록해야할때, 부모에 한번에 등록 가능함! event 리스너 파악을 위해 위 예시처럼 사용 가능. breakpoint 걸고, watch탭에서 event.target.nodeName XX event.target.dataset.id queryselector 값 찾아오는 법
버튼을 클릭하면 bubbling up이 되어 middle, outer까지 클릭 이벤트가 실행됨. event.stopPropagation(); event.stopImmediatePropagation(); 이 두개는 되도록 사용하지 말것! 해당 버튼을 참고하고 있는 모든 리스너를 무시하게 됨. 우리가 모르는 코드가 있을 수 있으므로 매우 위험(프로젝트 규모가 커지면, 예상하지 못한 오류 발생 가능성 높음) how?? 해당되는 모든 부모에서 if(event.target !== event.currentTarget){ return; } 이 함수를 넣어줌. ===== event.preventDefault(); 모든 함수를 처리하고-> 체크박스 체크표시 active event listener 브라우저는 우리가 설정한..
$0.dispachEvent(new Event('click')); 콘솔창에서 인공적으로 이벤트를 만들수 있음. 또한 콘솔창에서 const listener = () => {console.log('clicked!'); 이렇게 콜백함수 선언 가능하고 그 이후에 $0.addEventlistener('click', listener); 이러면 클릭하면 반응하고 $0.removeEventlistener(); 이러면 이제 안함. 이렇게 콘솔창에서 자바스크립트를 선언하고 제어할 수 있음 출처 browser101 6.1강
array.ptororype.join(); > Array.prototype.toString(); 원본 유지 결과 string 반환 join(separator?: string): string; join은 array로 새로운 string을 생성, 반환해준다. seperator: 생략 ,로 구분해서 출력 "string입력" ", " " and " 해당 값으로 구분자 적용 '' or "" 붙여서 출력 여기서 array란, index값이 0부터 시작해서 순차적으로 올라가는 일반적인 array를 말하며, index값에 다른 값(string등)이 추가된 경우 array-like object로 분류되어, join.call을 사용한다.(참고 https://developer.mozilla.org/en-US/docs/Web..
array.prototype.find(); 원본 유지 해당 array 요소 한개 반환 해당 조건을 만족하는 모든 요소의 반환이 필요할 경우 filter(); 사용. find(callbackFn) find(callbackFn, thisArg) const result = students.find(function(value, index){ return value.score === 90; }); 아래와 같이 간략화 가능함. const result2 = students.find((value) => value.score=== 90); console.log(result); 여기서 콜백함수는 boolean 타입을 반환해야 한다. 이 경우 value.score가 true가 될 경우, 해당 값을 반환하고 바로 종료된다. ..
array.splice(); 원본 변경 지워진 값 array로 반환 splice는 array에서 원하는 부분을 지우고, 새로운 값을 넣어준다. splice(start, deleteCount?, item1?, item2?, itemN?) start : array.length 0 해당 갯수만큼 지움. item1, item2, itemN : 해당 아이템을 그 자리에 넣어줌. return : 지워진 값이 array로 반환됨. (1개든, 0개든 무조건 array로 반환됨)
//1. String concatenation console.log('my' + 'cat'); //mycat console.log('1' + 2); //12 console.log(`string literals: 1+2 = ${1 + 2}`); //string literals: 1+2 = 3 //2. Numberic operators console.log(1 + 1); //add 더하기 console.log(1 - 1); //substract 빼기 console.log(1 / 1); //divide 나누기 console.log(1 * 1); //multiply 곱하기 console.log(5 % 2); //remainder 나머지 console.log(2 ** 3); //exponentiation 2의 3..
// 1. Use strict // added in ES 5 선언 안된 변수의 할당을 막아줌. // use this for Vanila Javascript. 순수 바닐라 자바스크립트 작성시 되도록 써줄것. 'use strict'; // 2. Variable, rw(read/write) // let (added in ES6) 읽고 쓰기 가능 let globalName = 'global name'; { let name = 'ellie'; console.log(name); name = 'hello'; console.log(name); console.log(globalName); } console.log(name); console.log(globalName); // var (don't ever use this!..
parsing : 한줄씩 실행 fetching : 서버에서 받아옴 자바스크립트 에서는 너무 유연해서 ECMA5에서 추가됨. 선언안된 값 할당 안되게 막음. 'use strict' 출처 https://youtu.be/tJieVCgGzhs
import java.util.ArrayList; import java.util.Collections; import java.util.List; public class Main { public static void main(String[] args) { List integerList = new ArrayList(); integerList.add(1); integerList.add(5); integerList.add(4); integerList.add(9); System.out.println(integerList); Collections.sort(integerList); //sort시켜줌 System.out.println(integerList); System.out.println(integerList.si..
아래 예제에서는 throw로 다음 사람에게 에러메세지를 넘겨줘야 해당 부분 에러메세지가 출력되고, 그 뒷부분도 실행이 된다. 일단 기록을 위해 적어둔다. import java.io.IOException; class ArrayCalculation { int[] arr = { 0, 1, 2, 3, 4 }; public int divide(int denominatorIndex, int numeratorIndex) throws ArithmeticException, ArrayIndexOutOfBoundsException{ return arr[denominatorIndex] / arr[numeratorIndex]; } } public class Main { public static void main(String[]..
abstract class Bird { private int x, y, z; void fly(int x, int y, int z) { printLocationBefore(); System.out.println("이동합니당."); this.x = x; this.y = y; if (flyable(z)) { this.z = z; } else { System.out.println("그높이 안됨"); } printLocation(); } abstract boolean flyable(int z); public void printLocation() { System.out.println("현위치 : (" + x + "," + y + "," + z + ")"); System.out.println("======이동완료==..
이런 상황에서, 읽어올때 보통은 잘 읽어지는데 종종 아래와 같은 에러가 나올때가 있다. 원인을 알아보기 위해 전체 배열을 출력해보면, ?? Title앞에 \ufeff 라는 이상한 글자가 붙어있다. 해결방법 1. (권장) 인코딩 문제인데, open 부분에 아래와 같이 encoding='utf-8-sig' 를 넣어주면 잘 인식한다. import csv books = [] # Add books to your shelf by reading from books.csv with open("books.csv", encoding='utf-8-sig') as file: file_reader = csv.DictReader(file) for book in file_reader: books.append(book) # Prin..
