100세까지 코딩

1 ROUND : 이벤트 추가 - onclick : 이벤트를 여러 개 적용 불가능. (기존 이벤트 덮어쓴다.) - addEventListener : 여러 이벤트를 추가할 수 있다. addEventListener 승리 2 ROUND : 브라우저 호환 - onclick : 모든 브라우저에서 호환 가능. - addEventListener : IE 6,7,8 호환 X. 즉, 오래된 브라우저 지원 불가. onclick 승리 3 ROUND : 버블링 / 캡쳐링 - onclick : 버블링만 가능. - addEventListener : 세 번째 파라미터로 지정 가능. true : 캡처링, false : 버블링. addEventListener 승리 결론 인라인 작성의 편리함이 있을 수 있지만 웬만하면 addEventL..

문제 - click 이벤트 등록 후, 화면 켜지마자 click을 안해도 실행. 이유 - 이벤트 함수에 파라미터를 넣었을 때 나타난다. 예시 addEventListener * 오류 element.addEventListener("click", goToScroll(element.id)); }); * 정상 동작 (ES6 이상) element.addEventListener("click", () => { goToScroll(element.id); }); onClick * 오류 onClick={this.props.removeTaskFunction(todo)} * 정상 동작 onClick={() => { this.props.removeTaskFunction(todo) } 참고 React onClick function ..

메인 화면 현재 시간 가져오기 - new Date() : 현재 날짜 및 시간 - getHours(), getMinutes(), getSeconds() : 시 분 초 가져오기 - setInterval(func, delay) : 타이머가 지정된 코드 실행 사이에 지연해야 하는 밀리초(1/1000초) 단위의 시간 const currentTime = () => { cur = setInterval(() => { let currentTime = new Date(); minute.innerHTML = (currentTime.getHours() < 10 ? "0" : "") + currentTime.getHours() + `&nbsp :`; second.innerHTML = `&nbsp` + (currentTime.g..

Todo 새로운 요소 추가하기 - addEventListener : 요소에 이벤트 추가 - 배열.unshift : 배열의 앞에 아이템 추가 - 요소.prepend : 요소안에 생성한 새로운 요소 앞에 추가 const list = document.getElementById("list"); const createBtn = document.getElementById("create-btn"); let todos = []; createBtn.addEventListener("click", createNewTodo); function createNewTodo() { const item = { id: new Date().getTime(), text: "", compelete: false }; todos.unshift(..

NETFLIX 사이트 애니메이션 효과 - transition : 애니메이션 속도를 조절 - transform : 요소를 회전하거나 확대 / 축소하거나 비트는 등 형태를 변형 scale : 확대 / 축소 rotate : 회전 translate : 이동 skew : 비틀기 .row_poster { width: 100%; object-fit: contain; max-height: 100px; margin-right: 10px; transition: transform 450ms; } .row_poster:hover { transform: scale(1.2); }​ row html NETFLIX ORIGINALS 실행 결과 GitHub GitHub - jeongdong99/NETFLIX Contribute to ..

화면에 고정하기 - position : fixed 브라우저의 전체 화면을 기준으로 고정 배치 top, left, bottom, right와 같은 offset 속성 사용 - z-index : 숫자가 높을 수록 가려지지 않고 앞으로 배치 .sidebar { position: fixed; left: 0; bottom: 0; top: 55px; background-color: #212121FF; width: 72px; z-index: 200; padding-top: 5px; } flex박스를 이용한 세로 가운데 정렬 - display : flex 복잡한 레이아웃을 간단하게 구현 가능 (요소 크기, 순서, 배치, 정렬, 분산 등) - flex-direction : column 주축을 세로로 row(default)..