* 요소의 실제크기 확인하기 자바스크립트는 요소의 너비나 높이, 그리고 위치정보를 알 수 있는 기하정보 관련 API 함수를 제공한다. 해당 함수를 활용하여 요소의 위치를 변경하여 요소를 이동시키거나 요소의 크기를 알 수 있다. Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores vitae est temporibus mollitia consequatur adipisci at, laboriosam necessitatibus facere sit maxime, nemo placeat dolore consectetur suscipit dignissimos ullam, exercitationem quo! Dolorum ipsum libero il..

* while 반복문 while (condition) { // 코드 // '반복문 본문(body)'이라 불림 } 조건(condition) 이 truthy 이면 반복문 본문의 코드가 실행된다. 반복문 본문이 한번 실행되는 것을 반복(iternation)이라고 한다. let i = 0; while (i < 3) { // 0, 1, 2가 출력됩니다. alert( i ); i++; } 해당 반복문은 i 값을 1씩 증가시켜가면서 i < 3 의 조건을 만족하는 동안 i 값을 경고창에 출력한다. 해당 반복문은 세번의 이터레이션을 수행한다. let i = 3; while (i) { // i가 0이 되면 조건이 falsy가 되므로 반복문이 멈춥니다. alert( i ); i--; } 반복문 조건에는 모든 종류의 표현식이..

const theme = { brandColor1: "#BE2525", brandColor2: "#BE0000", }; const backcolor = { bgColor1: 'orange', bgColor2: 'yellow' } const params = [theme, backcolor] // strings 는 문자열이 있는 부분만 추출해서 배열에 저장함 // values 는 함수나 객체가 있는 부분만 추출해서 배열에 저장함 function css(strings, ...values) { console.log(strings) console.log(values) return strings.reduce((res, str, i) => { // 문자열이 있는 부분은 그냥 연결하고 함수나 객체가 있는 부분은 함수를..

함수 참고문서 2 함수 - JavaScript | MDN 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범 developer.mozilla.org * 함수 스코프 - 렉시컬 스코프(Lexical Scope) 또는 정적 스코프(Static Scope) 스코프 참고 블로그 자바스크립트 - 렉시컬 스코프(Lexical Scope) 들어가기에 앞서, Closure(클로져)를 이해하기 위해서는 반드시 렉시컬 스코프(Lexical Scope)를 이해해야 한다. 렉시컬 스코프란(Lexical Scope)란? 함수를 어디서 호출하는지가 아니라 어디에 선언하였 ljtaek2.ti..

* 2차원 배열을 생성하는 방법 배열 리터럴 사용 const _2dArray = [[1, 2], [3, 4], [5, 6], [7,8], [9, 10]] 배열 리터럴을 사용하여 값을 초기화함과 동시에 변수에 할당할 수 있다. const _2dArray = [] const rows = 5 const columns = 2 for (let i = 0; i < rows; i++) { const element = [] for (let j = columns * i; j < columns * i + columns; j++) { element.push(j + 1) } _2dArray.push(element) } console.log(_2dArray) // const _2dArray = [[1, 2], [3, 4], [..

* 부분 배열 만들기 - slice [배열].slice(부분배열을 추출할 인덱스 시작점, 부분배열을 추출할 인덱스 끝점) 배열의 slice 메서드는 원본배열로부터 부분배열을 추출한 다음 새로운 배열로 반환한다. 원본배열은 변경되지 않는다. 부분배열은 원본배열의 얕은 복사본이다. slice 메서드의 첫번째 인자로는 추출을 시작할 인덱스의 위치가 들어가고, 두번째 인자로는 추출을 종료할 인덱스의 위치가 들어간다. const words = ['car', 'paper', 'mobile', 'computer', 'school', 'sun', 'house'] const slicedWords = words.slice(3) console.log(slicedWords) 위 코드는 3번 인덱스부터 시작해서 배열요소들을 추..

* 배열요소 추가, 삭제 - push, pop [배열].push(추가할 요소) 배열의 push 메서드는 인자로 주어진 값을 배열의 끝에 추가한다. 또한, 배열의 새로운 길이를 반환한다. push 메서드는 원본 배열을 변경한다. const seasons = ['spring', 'summer', 'autumn'] const arrLength = seasons.push('winter') console.log(seasons) // 변경된 원본배열 출력 console.log(arrLength) // 변경된 배열 길이 출력 위 코드는 seasons 배열에 winter 라는 문자열을 배열 끝에 추가한다. const multiplyBySix = [] for(let i=1; i 배열요소 2) return 1 // 배열요..

* 배열 검색 - indexOf, lastIndexOf, find, findIndex, includes, filter, some, every [배열].indexOf(검색할 요소, 검색 시작 위치) 배열의 indexOf 메서드는 첫번째 인자로 검색할 배열요소가 들어간다. 두번째 인자로는 검색을 시작할 인덱스 위치값을 설정하면 된다. 검색할 요소를 찾으면 해당요소의 인덱스값을 반환하고, 검색에 실패하면 -1 을 반환한다. const animals = ['lion', 'tiger', 'cat', 'dog', 'pig', 'cat'] const searchedAnimal = animals.indexOf('cat') console.log(searchedAnimal) animals 라는 배열에서 'cat' 이라는 ..

* 스크롤 이벤트 스크롤 이벤트는 마우스 휠을 스크롤할때 발생하는 이벤트이다. 해당 이벤트를 사용하면 웹페이지에서 유용한 효과나 애니메이션을 보여줄 수 있다. * 가로 스크롤링 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 index.html 파일을 위와 같이 작성한다. 리스트 아이템이 20개가 있다. body{ background-image: url(https://images.pexels.com/photos/531880/pexels-photo-531880.jpeg?cs=srgb&dl=pexels-pixabay-531880.jpg&fm=jpg); } .container{ display: flex; width: 80%; height: 200px; margin: ..

* 사용자 입력 이벤트 처리하기 index.html 파일을 위와 같이 작성하자! 사용자 입력을 처리하기 위한 input 요소와 배경색상을 변경하기 위한 div 요소를 정의한다. body{ margin: 0; padding: 0; background: #0e1111; } .color-box{ background-color: #0e1111; position: absolute; left: 0; top: 0; width: 100%; height: 100vh; } #color-input{ all: unset; width: 300px; height: 50px; border: 2px solid lightgreen; padding: 10px; border-radius: 15px; color: lightgreen; fo..