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로 입력을 하면 해당 요소의 하위 요소가 모두 싹 지워지고 입력값은 모두 텍스트로만 인식되어 채워지게 됩니다. 따라서 하위 태그가 있는 경우 사용이 불가능합니다. 하지만 읽어..
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..
홈 TV프로그램 영화 내가 찜한 콘텐츠 오늘의 영화 토르: 러브 앤 썬더 오늘 한국의 Top 10 영화 오늘 한국의 추천 영화 갑시다 갑시다 어려웠던점 또 모르고 글씨를 지워서 한참 시간낭비 (삼항의 null부분) 유심히 보자.
영화 버킷 리스트 다음 이 프로젝트의 가장 큰 수확은 오타를 찾다가 빡쳐서 선택영역 색상 변경하는걸 찾아본 것. 더이상 모르고 선택해서 지울 일은 없다.
선택이 이런식으로 되니 보이지가 않아서 모르고 지워서 오류가 하루에 세네번씩 난다. 이젠 안되겠다 싶어 하이라이트 색상 변경 방법을 검색... 커서 색상 변경 핫핑크로. 탐색창에 >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관련 강의? 할 예정. 질문게시판 적극 활용할 것. 오늘 할 일을 내일 하지 말고, 무슨 일이 있어도 오늘 끝낼것. 돌파력 있는 개발자가 될 것. 모르는 것에 떳떳할 것. 점진적, 나선형 학습 같이 밥먹고 싶은 사람이 될 것 ---- 갑시다~
/ / 3장. JQuery 연습하기 코드스니펫 [코드스니펫] - JQuery 연습 뼈대 코드 매주 월요일, 내 강의실에 찾아오는 코딩 학습지 카카오로 1초만에 시작하기 이메일로 시작하기 이메일 로그인하기 이메일이 기억나지 않아요. let temp_html = `로그인하기`; const start = document.querySelector('#start'); start.addEventListener('click', () => { show(); }) let isShow = true; function show() { isShow ? ($('.email').hide(), isShow = false) : ($('.email').show(), isShow = true) } const login = document..
let users = [ { 'name': '영희', 'email': "young@gamil.com" }, { 'name': '영숙', 'email': "suk@naver.com" }, { 'name': '민수', 'email': "minsu.gmail.com" }, { 'name': '형준', 'email': "jun@naver,com" }, { 'name': '철수', 'email': "su.gmail.com" }, { 'name': '동희', 'email': "dongdong@daum.net" }, ] for (a of users) { a['email'].includes('@') ? null : console.log(a['name']); }
객체 출력시 console.log에서 연산자와 객체가 만나면 내용이 아닌 객체의 type인 object가 출력됨. 쉼표를 사용해서 별도로 출력하거나, JSON.stringify()사용. console.log(a + '22')//[object Object]22 console.log(a, '22')//{age: 30, name: '동희'} '22' console.log(JSON.stringify(a) + 'rrr'); //{"age":30,"name":"동희"}rrr function seyHello() { let textbox = document.querySelector('#input') if (textbox != null) { alert(textbox.value + '안녕하세요') } } let users..
우리 아이 코딩 고민은 그만! 쉽고 부담없는 온라인 코딩 학습지 카카오로 1초만에 시작~ 이메일로 시작하기 *스파르타 코딩클럽 통합 회원으로 로그인 가능합니다.
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)=>{ }) 컴포넌트 만드는 법 작성중~
props로 별걸 다 전송 가능. ('yellow') 말고 "yellow"로 전송도 가능. import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [제목, 제목변경] = useState(['2남자 코트 추천', '3고양이 코트 추천', '1강아지 코트 추천']) let [좋아요, set좋아요] = useState([0, 0, 0, 0]); let [modal, setModal] = useState(true); let [index, setIndex] = useState(0); //1. array의 자료 갯수만큼 함수안의 코드 실행 //2. 함수의 파라미터는 array내부의 ..
