효니 TIL

concat() 메서드와 ...spread operator(전개 연산자), push() 메서드를 사용해배열을 합치는 방법을 알아보겠습니다. 1. concat() 메서드2. ...spread operator(전개 연산자)3. push() 메서드와 spread operator 1. concat()concat([valueN])Array 인스턴스의 concat() 메서드는 인자(매개변수, Parameter)로 주어진 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환합니다. (기존 배열은 변경되지 않습니다.) valueN새 배열로 연결할 배열 또는 값 반환값새로운 배열 const arr = ['a', 'b', 'c'];const newArr = arr.concat(['d', 'e', 'f']);console..

[JavaScript] 배열 앞, 뒤에 요소 추가, 삭제하기 - unshift(), push(), shift(), pop()[JavaScript] 배열의 첫 번째 값, 마지막 값 가져오기 배열의 중간에 요소를 추가, 삭제하는 방법을 알아보겠습니다. 배열의 중간에 요소 추가, 삭제하기배열의 중간에 요소를 추가, 삭제하기 위해서는 splice() 메서드를 사용합니다. splice()array.splice(start[, deleteCount[, item1[, item2[, ...]]]])splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나새 요소를 추가하여 배열의 내용을 변경합니다. start배열의 변경을 시작할 index deleteCount배열에서 제거할 요소의 수start index부터 d..

배열의 첫 번째 값과 마지막 값 가져오는 방법을 알아보겠습니다. 배열의 첫 번째 값 가져오기const arr = ["a", "b", "c", "d", "e"];const firstVal = arr[0];console.log(firstVal); // a배열의 index는 0부터 시작합니다.const firstVal = arr[0];배열의 0번째 index값으로 배열의 첫 번째 값을 가져왔습니다. 배열의 마지막 값 가져오기const arr = ["a", "b", "c", "d", "e"];const firstVal = arr[arr.length -1];console.log(firstVal); // econst firstVal = arr[arr.length -1];위 예제에서arr배열의 길이(arr.leng..

배열의 앞과 뒤에 요소를 추가, 삭제하는 방법을 알아보겠습니다. 배열의 맨 앞에 요소 추가: unshift()배열의 맨 앞에 요소 삭제: shift()배열의 맨 뒤에 요소 추가: push()배열의 맨 뒤에 요소 삭제: pop()배열의 중간에 요소 추가, 삭제: splice()배열의 앞, 뒤에 요소 추가하기unshift()arr.unshift([...elementN]);unshift() 메서드는 주어진 값을 배열의 맨 앞쪽에 추가하고, 배열의 새로운 길이를 반환합니다. elementN배열 맨 앞에 추가할 요소 반환값인자(매개변수, Parameter)로 전달된 요소가 추가된 배열의 새로운 길이를 반환합니다. const arr = ["apple", "banana"];arr.unshift('cherry');c..

배열의 길이를 확인하기 위해서는 Array 인스턴스의 length속성을 사용합니다. 1. 배열의 길이 확인하기const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];console.log(clothing); // ['shoes', 'shirts', 'socks', 'sweaters']console.log(clothing.length); // 4clothing배열의 길이를 확인해 보니 4인 것을 확인할 수 있습니다. 2. 배열의 길이 설정하기const clothing = ['shoes', 'shirts', 'socks', 'sweaters'];clothing.length = 3;console.log(clothing); // ['shoes', 'shirts'..

JavaScript에서 배열을 선언하는 방법을 알아보겠습니다. 배열 선언하기let arr = [];let arr = Array();let arr = new Array(); 1. 대괄호[]를 사용하여 배열 선언하기const arr = [];const arr1 = ["bread", "milk", "cheese"];const arr2 = ["tree", 7, true, [0, 1, 2]];console.log(arr); // []console.log(arr1); // ["bread", "milk", "cheese"]console.log(arr2); // ['tree', 7, true, Array(3)]console.log(arr2.length) // 4위 예제처럼const arr = [];대괄호를 사용하여..

input태그 사용 시 사용자의 입력을 막기 위해 readonly와 disabled를 사용합니다. 1. readonly 태그의 readonly 속성은 요소의 입력 필드가 읽기 전용임을 명시한다.readonly 속성은 input type="text" 에만 가능하다.readonly 속성이 명시된 입력 필드의 값은 form 전송(submit)시 서버로 전달된다. 가상 선택자:read-write 편집할 수 있는 요소:read-only 편집할 수 없는 요소input:-moz-read-write {background-color: yellowgreen;} /* Firefox */input:read-write {background-color: yellowgreen;}input:-moz-read-only {back..

input[type="number"] 오른쪽 화살표 없애기 ( 증가,감소 버튼) input 태그에 type="number"를 사용했을 경우 해당 태그에 포커스를 주면 우측에 숫자를 +1, -1 할 수 있는 화살표가 생성됩니다. 화살표를 제거하고 싶다면 아래 css코드를 추가해주면 됩니다./* Chrome, Safari, Edge, Opera */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;}/* Firefox */input[type=number] { -moz-appearance: textfield;} 이제 포커스를 줘도 화살표가 생성되지 않습니다.

마우스 이벤트 종류 click- 사용자가 해당 element를 클릭했을 때(버튼을 눌렀다가 떼었을 때) 발생 합니다. mousedown- 사용자가 해당 element에서 마우스 버튼을 눌렀을 때 발생합니다.mouseup- 사용자가 해당 element에서 눌렀던 마우스 버튼을 떼었을 때 발생합니다. dblclick- 사용자가 해당 element에서 마우스 버튼을 더블 클릭했을 때 발생합니다. mousemove- 사용자가 해당 element에서 마우스를 움직였을 때 발생합니다. mouseover- 사용자가 마우스를 해당 element 바깥에서 안으로 옮겼을 때 발생합니다. mouseout- 사용자가 마우스를 해당 element 안에서 바깥으로 옮겼을 때 발생합니다. mouseenter- 사용자가 마우스를 해..

🌵 HTML 라디오 버튼1 라디오 버튼2 🌵 CSS.rdo-group{ position:relative; display:flex; align-items: center; width:300px; height:40px;}input[type="radio"] { display: none;}input[type="radio"]+label { position: absolute; display: block; left: 50%; width: 20px; height: 20px; background: url('https://github.com/hy0ni/library/assets/99204321/87fb372e-3217-418a-864b-d2d2..