본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

제가 배웠던것을 한곳에 정리해보았어요!

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

728x90

분류 전체보기174

#검색결과

총 174개를 찾았어요 ^^b

/

reverse() / sort() : 배열 순서 반전 및 정렬해주는 메서드들! reverse 배열의 순서를 반전합니다. 첫 번째 요소는 마지막 요소가 되며 마지막 요소는 첫 번째 요소가 됩니다 const arrNum1 = [100, 200, 300, 400, 500]; const arrNumReverse = arrNum1.reverse(); sort 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환합니다. const arrNum2 = [100, 200, 300, 400, 500]; const arrNumSort2 = arrNum2.sort(); 예시보기 번호 기본값 메서드 리턴값 1 [100,200,300,500,500] push(600) 2 [100,200,300,500,500] push(600) 3 [100,200,300,500,500] push(600) 4 [100,20..
2022. 9. 27.
unshift / shift 메서드 : 배열 맨 앞에 추가 또는 제거해주는 메서드 두가지! Unshift 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환합니다. const arrNum1 = [100, 200, 300, 400, 500]; const arrNumUnshift = arrNum1.unshift(600); 번호 기본값 메서드 리턴값 결과값 1 [100,200,300,400,500] push(600) 100,200,300,400,500,600 100,200,300,400,500,600 shift 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환합니다. 이 메서드는 배열의 길이를 변하게 합니다. const arrNum2 = [100, 200, 300, 400, 500]; const arrNumShift = arrNum2.shift(600); 번호 기본값 메서드 리턴값 ..
2022. 9. 27.
마우스를 따라가는 눈알 효과 만들어보기! 공이 돌아가는 애니메이션을 구현해보자~! 이번에는 눈알이 마우스를 따라 돌아가는 효과를 한번 구현해볼게요!! HTML 코드 html 코드는 별로 작성할게 없습니다 하단과 같이 작성 후 원하는 글자를 .text 클래스에 작성해 커스텀 하면 되더라구요! ABCDE CSS 코드 기본 적으로 모든 요소가 가운데에 정렬되고 살을 붙여주기 위해 하단과 같이 css 코드를 작성합니다. *{ margin: 0; padding: 0; box-sizing: border-box; } html, body{ height: 100%; overflow: hidden; } .wrapper{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width..
2022. 9. 26.
CSS를 통해 로딩화면 만들어보기 : 가운데를 중심으로 돌아가는 원들 공이 돌아가는 애니메이션을 구현해보자~! 공이 .ball 클래스를 중심으로 .ball:after가 360도로 돌아가는 효과를 구현해보도록 하겠습니다. 기대되는 마음을 품고 가~~~~~~보자고 HTML 코드 공이 돌아갈 수 있게 공들을 .ball 클래스를 적어 만들어주었어요! CSS 코드 사실상 이번 예제의 핵심인데 아래의 사항들을 생각하며 만들어 주시면 되더라구요! 1. .ball 클래스는 absolute로 설정해 중심을 각각 top,left,transform을 통해 가운데로 중심을 잡고 2. 그 .ball 클래스의 원을 :after를 이용해 생성해줍니다 3. .ball 주위를 돌아갈 수 있게 떨어트리기 위해서 :after에 absolute를 설정해 top을 0으로 설정해 떨어트려 만들어 줍니다 body..
2022. 9. 25.
728x90
반응형

#HASH_TAGS

-

1

scroll-snap-type 다크모드 선택해주세요 코드 ImageSlideEffect 필터선택자 JQuery 화사한가요? 공부 울적하니 꽃을 달아봤습니다 오징어 한마리 수확 완료! Method 코딩 제이쿼리 내일은 즐거운 월요일 오징어 1Kg 당 3000원 오늘도 웹표준은.. 오징어 두마리 포획 완료 숙제가 다양해서 너무 좋아요 슬라이드 결과 : 월요일 HTML scroll-snap-align 멈추지 않는 ' j ' 시리-즈 오늘은 내가바로 오징어! 오늘 조업 마감했습니다. 이건 또 뭐람 메서드