코딩기록

.date_week { width: 300px; cursor: pointer; padding: 10px; padding-left: 20px; border-radius: 20px; border: 0; outline: 0; color: #fff; font-size: 15px; background: #0cf; box-shadow: 0 4px 10px rgba(0,204,255, .3); } .date_week:hover { background: #26D4FF; } .date_week:active { background: #0bf; margin-top: 1px; box-shadow: 0 1px 10px rgba(0,204,255, .3); } .picker-icon { color: #fff; margin-lef..

제목 쓰기가 난감했다. 프로그레스바,, 색깔 나누기,,? 분할,,? 여튼 내가 만들고 싶었던 것은 저런 프로그레스 바 css로 만들려면 만들수야 있겠지만 만약 수치가 바뀔 때마다 조절하는 건 귀찮은 것 같아서 data를 이용했다. //html red % pink % blue % //css .progress-bar { width: 300px; height: 20px; border: 1px solid #ccc; font-size: 0; border-radius: 20px; padding: 2px;} .progress-bar div { height: 100%; display: inline-block; position: relative; } .progress-bar div:first-child{border-ra..

https://codepen.io/hongshii0i0i/pen/LYXRBgL javascript30 scroll event ... codepen.io function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (!immediate) func.apply(context, args); }; var callNow = immediate && !timeout; clearTimeout(timeout); timeout = setTimeout(later, wait); if (c..

Hey Let's Dance Give Take Receive Experience It Today Give All You can Life In Motion //css css는 기존에 있던 거에 flex로 배열을 맞춰주었다. .panel p:nth-child(1) {transform: translateY(-100%);} .panel p:nth-child(3) {transform: translateY(100%);} .panel.open { flex: 5; font-size: 40px;} .panel.open p:nth-child(1), .panel.open p:nth-child(3) {transform: translateY(0);} 글자 효과는 transform으로 위치를 바꿔주었고 panel에 flex:5를..

const data = 'new york;10.22;2000'; const transformData = data.split(';'); transformData[1] = +transformData[1] console.log(transformData); //(3) ['new york', 10.22, '2000'] split() - split(); (괄호)안에 구분자를 통해 문자열을 구분함. - transformData[1] = +transformData[1] -> 숫자로 변환 const nameFragments = ['max', 'anna']; const aaaa = ['123', 'dd'] const name = nameFragments.join('/ '); console.log(name); //max/ ..

const hobbies = ['drawing', 'swimming', 'yoga', 'filiates']; 내 취미 hobbies.push('trip'); //배열의 맨 끝에 값을 추가 -> ['drawing', 'swimming', 'yoga', 'filiates', 'trip'] hobbies.unshift('coding'); //배열의 앞순서에 추가 -> ['coding', 'drawing', 'swimming', 'yoga', 'filiates', 'trip'] hobbies.pop(); //배열의 맨 끝의 값을 제거 -> ['coding', 'drawing', 'swimming', 'yoga']; hobbies.shift() // 배열의 맨 앞의 값을 제거 -> ['drawing','swimm..

반복문 for 반복문 for-of 반복문 for-in 반복문 while 반복문 for (let i = 0 i < 3; i++ { console.log(i) } for (const el of array) { console.log(el); } for (const key in obj) { console.log(key); console.log(obj[key]); } while (isLoggedIn) { .... } for 반복문 - for(변수를 초기화; 조건; 매 반복 이후에 실행할 코드) - 특정횟수만큼 코드를 실행하도록 함. - 보통은 매 반복마다 증가 또는 변화 - 세미콜론으로 구분 for-of 반복문 - 배열의 모든 요소에 대해 코드를 실행할 수 있도록 함. - of를 사용하여 상수를 생성 for in..

1. Shorthand property names const name = 'elle'; const age = '18'; const ell1 = { name: name, age: age } const ell2 = {name,age} ell1을 ell2처럼 축약 가능 콘솔로 찍어보면 {name: 'elle', age: '18'} 잘 나온다 2. Destructuring assignment //객체 const student = { name: 'anna', level: 1 } const name = student.name; const level = student.level; console.log(name, level); //축약 const {name, level} = student; console.log(nam..

혼자 해보려고 했지만 대실패,, 코드 받아쓰기에 현타가 와서 자바스크립트를 좀 더 공부한 다음에 챌린지에 도전하기로 함..

순서대로 첫 번째부터 하려했지만 오디오 파일이 안나와서 두 번째부터 시작 //html 12 3 6 9 //css .hand 시계바늘에 있는 transition을 삭제했다ㅜㅠ 원래 무소음 시계로 만드려고 움직임을 부드럽게 했다가 강력새로고침 할 때마다 0도에서 돌아오는 것 때문에 포기. 그냥 초침 효과만 주려고 transition을 넣었는데 0초가 되면 바늘 위치가 이상해지는 오류가 난다. 그래서 일단 삭제.. 나중의 내가 고쳐보기로 //js const hoursHand = document.querySelector('.hours'); const minutesHand = document.querySelector('.minutes'); const secondsHand = document.querySelecto..