이경욱

투명도는 숫자로 계산되기 때문에 스크롤 위치와 타겟 위치를 출력하여 opacity값과 계산을 해준다면 자바스크립트에서 간단하게 투명도 조절이 가능해진다 nav.style.opacity = 1 - scrollposition / headerHeight DOM API에 접근해서 요소를 가져온 후 요소의 높이값을 구해준 데이터를 변수에 넣어준다. 조건문으로 현재 스크롤 값과 변수의 높이값을 비교해서 조건이 성립되었을 때 스타일 배경색을 변경하는 코드를 추가했다. // 헤더 스크롤 애니메이션 document.addEventListener('scroll', onScroll, {passive:true}); function onScroll () { const header = document.querySelector('..

1. 문제 정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두 배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요. let numbers = [1, 2, 3, 4, 5] 2. 풀이방식 내가 이 문제를 보고 들었던 풀이방식은 'for문을 돌려서 두 배씩 곱하면 되겠다' 라고 생각이 들었다. function solution1(numbers) { var answer = []; for (let i = 0; i < numbers.length; i++) { let x = numbers[i] * 2; answer.push(x) } return answer; } 3. 해설 다 풀고 제출 후 다른 사람들의 풀이를 보니 배울 점이 많았다. 2가지 방법이 있었는데, r..

실행 컨텍스트 실행할 코드의 환경 정보를 모아놓은 객체 1. 배경지식 (1) 콜스택이란? Stack : Last in, first out (LIFO) Queue : First in, first out (FIFO) (2) 함수 정의방식 A. 함수 선언문 function a () { /* ... */ } a(); // 실행 ok B. 익명 함수 표현식 var b = function () { /* ... */ } b(); // 실행 ok C. 기명 함수 표현식 var c = function d () { /* ... */ } c(); // 실행 ok d(); // 에러! (3) 함수 vs 메서드 독립성을 기준으로 차이가 납니다. a. 함수명(); b. 객체.메서드명(); 구분 기준 : [] or . (4) AS..

1. 데이터 타입 (Data type)의 종류 // 1. 데이터 타입(Data type) // (1) 기본형 (Primitive type) // a. Number // b. String // c. Boolean // d. null // e. undefined // f. Symbol // (2) 참조형 (Reference type) // A. 객체 (Object) // a. Array // b. Function // c. Date // d. RegExp // e. Map, WeakMap // f. Set, WeakSet 기본형과 참조형을 나누는 기준? 1. 값의 저장방식 기본형 : 주소값을 복제 참조형 : 주소값 묶음의 주소값을 복제 2. 불변성 여부 기본형 : 불변성을 띔 참조형 : 불변성을 띄지 않음 ..

body { text-align: center; } .box { display: inline-block; width: 85%; /* 이 값으로 여백 크기 조절 */ } .wrap { display: grid; 그리드로 양쪽 마진값을 주는 방법도 있지만, 전체를 묶어서 폭을 조절할 수도 있다. 생각보다 방법은 너무 간단한데, 먼저 부모 요소에 text-align: center; 를 주고 자식에게 display: inline-block을 넣어주면 가운데 정렬이 된다. 이 상태에서 width값을 조절해주면 양 옆 여백값을 표현할 수 있다. 그리고 그 밑에 그리드를 쓰고싶은대로 쓰면 된다.

const wrap = document.getElementsByClassName('wrap')[0]; const container = document.getElementsByClassName('box'); let page = 0; const lastPage = container.length - 1; console.log(lastPage); window.addEventListener('wheel', (e) => { //e.preventDefault(); if (e.deltaY > 0) { page++; } else if (e.deltaY lastPage) { page = lastPage; } conso..

preventDefault 이름에서부터 느낌이 오듯이 어떠한 동작을 막아줄 때 사용하는 메서드이다.' 기본 문법 event.preventDefault(); 사례가 너무 많아서 활용범위가 넓다는 것을 알게되었다. 아직 내 지식이 부족한 터라 조금씩 이 페이지를 채워나가는걸로...

세로로 스크롤 되는 크기를 조회하는 메서드. 사용자가 올릴 때 값은 음수 (-), 내릴 때 값은 양수 (+) 가 된다.

기본 문법 addEventListener("이벤트종류", 함수) 이벤트 종류 구분 종류 설명 1 mouseover 마우스 커서가 진입하는 순간 2 mouseout 마우스 커서가 나가는 순간 3 mousedown 클릭한 순간 4 mouseup 마우스 버튼을 떼는 순간 5 mousemove 마우스 커서가 움직이는 순간 6 keypress 키를 누르는 순간, 누르고 있는 동안 7 keydown 키를 눌렀을 때 8 keyup 키룰 눌렀다가 떼는 순간 9 focus 포커스되었을 때 10 blur 포커스에서 벗어났을 때 11 click 클릭 후 손을 떼면 발생 12 resize 브라우저 창 크기 조절할 때 발생 13 load 로드가 완료되었을 때 발생 14 unload 다른 페이지 이동이나 탭을 닫을 때 발생 15..

A. ES6 1. 구조분해할당 (1) 배열의 경우 let arr = ["value1", "value2"]; let [a, b] = arr; console.log(a, b); 값을 할당해줄 수 있다. (2) 객체인 경우 1번 예시 let {name, age} = { name: "abc", age: 30, }; console.log(name); console.log(age); 각 순서에 맞게 요소를 할당한다. 리스트가 초과되면 이후 데이터는 undefined로 표기된다. 2번 예시 let user = { name: "abc", age: 30, }; let {name: newName, age: newAge} = user; console.log(newName); console.log(newAge); name이라..