웹 개발 공부 컨텐츠134 indexOf( )/lastIndexOf( )/includes( ) indexOf( ) / lastIndexOf( ) / includes( ) indexOf() 메서드는 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환합니다. lastIndexOf( ) 메서드는 반대로 기준을 끝에서 시작합니다. includes( ) 메서드는 찾을 값이 배열 값에 포함되어 있을 때 불린(true/false)으로 반환합니다. indexOf( ) / lastIndexOf( ) 메서드 객체 메서드와 동일하게 찾는 배열값을 식별자로 반환해주는 메서드입니다. 똑같이 배열값을 찾을 때 사용되며 값이 없으면 -1을 반환하는 것도 똑같습니다. lastIndexOf ( ) 메서드는 찾는 기준점이 끝에서 시작합니다. 문법 Array.indexOf(찾는 배열값) A.. 2022. 9. 27. slice( )/splice( ) slice( )/splice( ) slice( ) 메서드는 배열의 일부분(slice) 혹은 부분 배열(subarray)을 반환합니다 splice( ) 메서드는 배열의 기존 요소를 삭제 혹은 교체하거나 추가한 후 삭제한 배열 값을 반환합니다. slice( ) 메서드 slice( ) 메서드는 객체 메서드와 동일합니다. 배열값에 해당되는 식별자를 지정하고 해당 배열값을 반환합니다. 문법 Array.slice(반환을 시작할 순서, 반환이 끝날 순서) //-1은 뒤에서 시작 const arrNum = [100, 200, 300, 400, 500]; const result = arrNum.slice(2); document.querySelector(".sample08_N1").innerHTML = "1"; docum.. 2022. 9. 27. reduce( )/reduceRight( ) reduce( ) / reduceRight( ) reduce( ) 메서드는 배열의 여러개의 값을 하나의 값으로 축소하고 축소한 값을 반환합니다 reduceRight( ) 메서드는 배열의 여러개의 값을 하나의 값으로 축소하고 축소한 값을 역순으로 반환합니다 reduce( )과 reduceRight( ) 메서드 reduce( ) 메서드는 배열의 값을 하나의 값으로 축소하며, 반복문과 비슷하게 배열의 요소들을 순회하면서 반복적인 연산을 하는 메서드입니다. 하지만 콜백함수가 들어갈 때 반환하는 값이 다음 콜백 함수의 첫 번째 파라미터로 전달되는 차이점이 있습니다. 즉, 마지막 콜백 함수가 동작한 이후의 반환 값이 reduce 메서드의 return 값이 됩니다. reduceRight( )는 동일하지만 역순으로 반.. 2022. 9. 27. reverse( )/sort( )/concat( ) reverse( )/sort( )/contcat( ) 메서드 reverse( ) 메서드는 배열의 순서를 반대로 배열하고 반환합니다. sort( ) 메서드는 배열의 순서를 순서대로 배열합니다. contcat( ) 메서드는 기존 배열에 배열값을 합쳐서 새로운 배열을 반환합니다. reverse( ) 메서드 reverse( ) 메서드는 배열의 순서를 반전하여 첫번째 요소가 마지막이 되고 마지막 요소가 첫번째 요소가 됩니다. 기본 문법 Array.reverse( ) const arrNum1 = [100, 200, 300, 400, 500]; const arrNumReverse = arrNum1.reverse(); document.querySelector(".sample05_N1").innerHTML = "1"; .. 2022. 9. 27. unshift( )/shift( ) 메서드 unshift( )/shift( ) 메서드 unshift( ) 메서드는 배열 처음에 요소 추가 후 배열 갯수 반환합니다. shift( ) 배열 처음 요소를 삭제하고 삭제한 요소를 반환합니다. unshift( ) 메서드 unshift( )메서드는 push( ) 메서드와 비슷한 효과입니다. push( ) 메서드는 배열의 뒤에 새로운 요소를 추가하고 반환하지만 unshift( ) 메서드는 배열의 첫 부분에 새로운 요소를 추가하고 반환합니다. 기본 문법 Array.unshift(추가할 배열 값); const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); document.querySelector(".sample04_.. 2022. 9. 27. 움직이는 눈동자 애니메이션 움직이는 눈동자 애니메이션 CSS와 자바스크립트를 사용해 사진의 눈동자가 커서의 위치에 따라 움직이는 애니메이션입니다. See the Pen 눈이 움직이는 사진 by mbynae (@mbynae) on CodePen. ※ persepective 투시점의 거리를 설정합니다. perspective: length = 거리(length)만큼 투시점이 적용되어 3d 효과를 갖습니다. perspective: none = 투시점 거리를 설정하지 않습니다. 2022. 9. 26. 원 딜레이 회전 애니메이션 딜레이 원 회전 애니메이션 CSS를 사용해 작은 원이 딜레이를 가지고 회전하는 애니메이션입니다. See the Pen Untitled by mbynae (@mbynae) on CodePen. 2022. 9. 26. 박스 탄성 애니메이션 박스 애니메이션 CSS를 사용해 박스가 회전하며 위아래로 늘어나는 애니메이션입니다. See the Pen Untitled by mbynae (@mbynae) on CodePen. 2022. 9. 26. 물결 애니메이션 물결 애니메이션 CSS를 사용해 여러개의 원이 규칙적으로 웨이브를 만들어내는 애니메이션입니다. See the Pen CSS 물결 애니메이션 by mbynae (@mbynae) on CodePen. 2022. 9. 26. 이미지 호버 애니메이션 이미지 회전 애니메이션 CSS를 사용해 이미지에 커서를 올렸을 때 이미지가 180도 회전해서 뒷면이 나오게 하는 애니메이션입니다. See the Pen 이미지 앞뒤로 움직이는 마우스 호버 효과 by mbynae (@mbynae) on CodePen. 2022. 9. 26. 텍스트 테두리 애니메이션 글자 애니메이션 CSS를 사용해 글자의 테두리가 움직이며 글자를 나타내는 애니메이션입니다. See the Pen Text-Animation by mbynae (@mbynae) on CodePen. 2022. 9. 26. 움직이는 텍스트 애니메이션 글자 애니메이션 CSS를 사용해 각각 통통 튕기는 글자를 만드는 애니메이션 효과 입니다. See the Pen 글자가 통통 튀는 애니메이션 by mbynae (@mbynae) on CodePen. font-smoothing -webkit-font-smoothing: antialiased 폰트를 부드럽게 만들어주는 속성입니다. 아직 공식적으로 지원하는 기능이 아니라 -webkit-이 붙어있습니다. text-shadow text-shadow: offset-x offset-y blur-radius color 폰트에 그림자를 넣어주는 효과입니다. 뒤의 숫자는 각각 그림자의 x축 위치, y축 위치를 나타내며 그 뒤엔 그림자의 선명도와 색깔을 지정할 수 있습니다. 이번 애니메이션은 어려운건 없고 각각의 그림자의 애.. 2022. 9. 26. 이전 1 2 3 4 5 6 ··· 12 다음
