효니 TIL

배열의 첫 번째 값과 마지막 값 가져오는 방법을 알아보겠습니다. 배열의 첫 번째 값 가져오기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..

마우스 클릭 좌표 (clientX, offsetX, pageX, screenX의 차이점 알아보기)1. screenX, screenY2. pageX, pageY3. clientX, clientY4. offsetX, offsetY 1. screenX, screenY사용자 모니터 화면을 기준으로 좌표를 표시합니다.screenX: 사용자 모니터 화면의 왼쪽 상단 모서리 지점을 0으로 측정하여 x좌표 위치를 반환합니다.screenY: 사용자 모니터 화면의 왼쪽 상단 모서리 지점을 0으로 측정하여Y좌표 위치를 반환합니다. 2. pageX, pageY전체 문서를 기준으로 좌표를 표시합니다.스크롤바가 움직이게 되면 특정 지점의 pageY 좌표값도 변경 됩니다. 3. clientX,clientY사용자에게 보여지는 브..

해당 포스팅은 유튜브에 업로드된 '맛있는 코딩'님의 강좌를 들으며 공부한 내용들입니다. 👉 맛있는 코딩 강좌 바로가기 Lerp는 Linear interpolation의 약자로서 선형 보간법을 뜻합니다. Lerp는 많은 곳에서 사용되고 있습니다. 가장 대표적으로는 애니메이션 효과를 만들때 주로 사용이 되는데요 예를 들어 웹에서 부드러운 스크롤 효과를 구현하거나 마우스를 따라다니는 커서를 부드럽게 따라오도록 할 때, 2d나 3d에서 캐릭터의 방향전환을 부드럽게 만들고 싶을 때 등등 부드럽게, 자연스럽게 애니메이션 효과를 구현하기 위해 이 Lerp를 많이 사용하고 있습니다. Lerp의 원리 알아보기 만약 마우스를 따라다니는 공을 만든다고 가정했을 때 다음처럼 마우스를 왼쪽에서 오른쪽으로 움직이면 일반적인 방식..