https://taehyunkim3.github.io/JS30/drum.html 해당 프로젝트 링크 Bootstrap demo taehyunkim3.github.io 왜bootstarp demo는 바꿔도 안바뀔까. 하. 겨우 찾았다. 마우스로 해당 버튼을 클릭하면, 해당 버튼에 애니메이션이 구현되도록 해야했는데, 여기서 에니메이션은 key-code로 묶여있기에, 큰 수정 없이 기능을 추가하기 위해서는 마우스 클릭을 하면 해당 요소의 data-key 값을 불러올 수 있어야 한다. 보통 해당 요소의 속성을 불러올땐 getAttribute를 사용하는데 this는 getAttribute를 사용할 수 없다. ㅠㅠ 따라서 this 대신에 addeventlistener에서 인자를 넘겨줘야하는데, 문제는 addEven..
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..
자바스크립트에서 html을 조작하는 방법은 정말 여러가지가 있는데 그중 입력을 기준으로 세가지 방법을 비교해보겠습니다. textContent textContent는 CSS요소를 고려하지 않기 때문에 가장 빠르지만, 읽을때 이야기이고, 쓸때는 결국 다른 요소들의 높이, 위치에 영향이 있기 때문에 CSS를 다시 그리는 reflow가 들어가게 됩니다. Hello! World! document.getElementById('sample').textContent = 'HiThere!!'; //화면출력 //Hi!There!! textContent로 입력을 하면 해당 요소의 하위 요소가 모두 싹 지워지고 입력값은 모두 텍스트로만 인식되어 채워지게 됩니다. 따라서 하위 태그가 있는 경우 사용이 불가능합니다. 하지만 읽어..
https://school.programmers.co.kr/learn/courses/30/lessons/160586 나의 solution function solution(keymap, targets) { let result = []; //타겟1개중 for (targetsIndex in targets) { let targetCount = []; for (targetElement of targets[targetsIndex]) {//타겟 한개중 타겟한글자 let keymapCount = []; for (a of keymap) { //키맵 종류 하나씩 테스트 let index = a.search(targetElement); index === -1 ? keymapCount.push(index) : keymapCo..
선택이 이런식으로 되니 보이지가 않아서 모르고 지워서 오류가 하루에 세네번씩 난다. 이젠 안되겠다 싶어 하이라이트 색상 변경 방법을 검색... 커서 색상 변경 핫핑크로. 탐색창에 >setting.json (user) 입력하고, 해당 프로젝트만 변경시 document setting, 이 컴퓨터의 모든 프로젝트에 적용시 user setting을 선택하면 된다. 이걸 열어서 아래 코드를 맨 아래 붙여주는데, 중괋호 안에 들어오게 한다(위 사진 노란 중괄호 밖에 하면 안됨) "workbench.colorCustomizations": { "editorCursor.foreground": "#f53eb8",//에디터 커서 색상 추가 "terminalCursor.foreground": "#f53eb8",//터미널 커서..
2023.6.2 제이쿼리 $('#id').attr('src', '${data["articles"][0]["image"]}') 바닐라자바스크립트 let movPic = document.querySelector("#moviesPic"); movPic.setAttribute("src", `${data["articles"][0]["image"]}`); 영화 버킷 리스트 다음
2023년 6월 2일 무엇이든 물어보살 이라는 이름의, 질의응답 시간. 약 80명이 모임. 내용이 참 많았지만, 내가 지금 가지고 가야 할 말만 남겨본다. 중요한 것은 꺾이지 않는 마음이 아니라 꺾여도 계속 하는 마음 조만간 TIL관련 강의? 할 예정. 질문게시판 적극 활용할 것. 오늘 할 일을 내일 하지 말고, 무슨 일이 있어도 오늘 끝낼것. 돌파력 있는 개발자가 될 것. 모르는 것에 떳떳할 것. 점진적, 나선형 학습 같이 밥먹고 싶은 사람이 될 것 ---- 갑시다~
state 만드는법 let [제목, 제목설정] = setState(값들) //값은 원시요소 말고도 배열, 오브젝트도 들어갈 수 있다. 사용할때 return ( { 제목 } //변경은 아래와 같이 { set좋아요(좋아요 + 1) }}>👍 {좋아요} ) props 전송하는법 function App(){ let [index, setIndex] = setState(0); let [제목, 제목설정] = setState(['다람쥐 코트 추천', '고양이 코트 추천', '강아지 신발 추천']) return( ); } function Modal(props){ return( {props.제목[props.index]} 날짜 상세내용 ) } // [0, 1, 2, 3, 4].map((a)=>{ }) 컴포넌트 만드는 법 작성중~
