4전 4전

css에서 backdrop-filter를 사용하면 요소 뒤에 있는 영역에 시각적 필터를 적용할 수 있습니다. | 사용 1. 사용법 backdrop-filter에 blur() 함수를 사용하면 요소 뒤의 배경에 반투명한 배경을 적용해 줍니다. .blur { backdrop-filter:blur(10px); } 이런 식으로 사용하면 되고 값에 % 나 px 등을 사용하여 투명 강도를 설정해 줄 수 있습니다. 2. 스타일 적용 blur .back-ground { background-image: url("https://picsum.photos/300/300"); width: 300px; height: 300px; display:flex; justify-content: center; align-items: cente..

css에서 사용자 변수를 사용하면 반복적으로 사용되는 값을 변수에 저장하고 이를 여러 곳에서 참조할 수 있습니다. | 사용 1. 변수 선언 CSS에서 변수를 선언할 때는 '--'를 접두사로 사용해서 변수 이름을 정의하면 됩니다. :root { --main-color: red; } 보통 변수를 선언할 때 :root 선택자를 사용합니다. → :root 선택자는 HTML문서에서 최상위 요소를 나타냄 위에 코드에서는 :root 선택자를 사용해서 문서의 루트요소에 '--main-color'라는 변수를 선언하고 변수의 초기값을 빨간색인 red로 지정해 주었습니다. 2. 변수 사용 선언한 css변수를 사용하고 싶으면 var() 함수를 사용해 변수 이름을 참조하면 됩니다. div { background-color: v..

자바스크립트에서 생성자 함수를 사용하면 비슷하게 생긴 객체를 쉽게 만들어줄 수 있습니다. | 사용 1. 생성 생성자 함수는 일반 함수를 만드는 것 같이 만들면 되는데 this키워드를 사용하여 새로 생성할 객체의 값을 디자인하면 됩니다. function Person(name, age){ this.name = name; this.age = age; this.sayHi = function(){ console.log(`저의 이름은 ${name} 입니다`) } } 또한 생성자 함수의 이름의 첫 시작은 보통 대문자로 합니다. 2. 객체 만들기 작성한 생성자 함수로 객체를 만들려면 new키워드를 사용하면 됩니다. let 나 = new Person('Lee', '25'); let 너 = new Person('Kim',..

| ?. (Optional Chaining) ?. 는 자바스크립트 object자료형에서 자료를 꺼내고 싶을 때 마침표를 찍어서 꺼내듯이 ?.도 비슷한 기능을 합니다. let data = { name: "Lee", age: 25 } console.log(data.name); // "Lee" 출력 console.log(data?.name); // "Lee" 출력 하지만 완전히 같은 기능을 하는 건 아니고, ?. 는 왼쪽에 있는 데이터가 null이거나 undefined인 경우 undefined를 남겨줍니다. 보통 중첩돼 있는 object자료에서 에러 없이 데이터를 꺼낼 때 사용합니다. 보통 데이터가 많이 중첩돼 있으면 중첩돼 있는 데이터를 잘못 꺼내는 경우가 생기는데 이럴 때 undefined를 남겨줘서 에러..

| Spread Operator 자바스크립트에서 Spread Operator는 배열이나 객체의 요소를 또 다른 배열이나 객체로 분산하거나 복사할 수 있는 연산자입니다. 점 3개(...)를연달아 쓰면 이게 Spread Operator입니다. 활용 방법은 다음과 같습니다. 1. 배열 복사 spread operator를 사용해서 배열을 복사할 수 있습니다. let arr = [1, 2, 3, 4, 5]; let copy = [...arr] console.log(copy); // [1, 2, 3, 4, 5]; 2. 배열 합치기 spread operator를 사용해서 배열들을 합칠 수 있습니다. let arr1 = [1, 2, 3]; let arr2 = [4, 5]; let arr3 = [...arr1, ...a..

Pseudo-class를 사용하면 상태에 따라서 스타일을 줄 수 있습니다. | 사용 .box { width:200px; height:200px; background-color:#6799FF; } .box:hover { background-color:#A566FF; /* 마우스를 요소에 올리면 동작함 */ } .box:active { background-color : #BCE55C; /* 마우스로 요소를 클릭하면 동작함 */ } HTML 삽입 미리보기할 수 없는 소스 이런 식으로 동작합니다. | 종류 1. :hover - 마우스 커서가 해당 요소위에 올라가 있으면 동작 2. :active - 마우스로 요소를 클릭하고 있으면 동작 3. :visited - 해당 링크에 연결된 페이지를 방문한 상태면 동작 4...

자바스크립트에서 shift(), unshift(), pop(), push() 은 배열의 값을 빼내거나 집어넣어 주는 메서드들입니다. | shift() shift() 메서드는 배열의 첫 번째 요소를 제거해 주고 그 값을 반환해 주는 메서드입니다. let arr = [1, 2, 3, 4, 5]; let firstElement = arr.shift(); console.log(arr); // [2, 3, 4, 5] 출력 console.log(firstElement); // 1출력 | unshift() unshift() 메서드는 배열의 앞부분부터 차례로 값을 추가해 주는 메서드입니다. let arr = [2, 3, 4, 5]; arr.unshift(1); console.log(arr); // [1, 2, 3, 4..

| 유사 배열 객체(Array-like Objects) 자바스크립트에서 유사 배열 객체는 실제로 배열은 아니지만 index로 값에 접근할 수 있고, length속성을 가지고 있어 배열과 유사한 객체입니다. let arrayLikeObj = {0: 'A', 1: 'B', 2: 'C', length: 3}; console.log(arrayLikeObj[0]); // 'A' console.log(arrayLikeObj.length); // 3 console.log(Array.isArray(arrayLikeObj)); // false for (let i = 0; i < arrayLikeObj.length; i++) { console.log(arrayLikeObj[i]); } // "A" // "B" // "C"..