본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

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

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

분류 전체보기176

#검색결과

총 176개를 찾았어요 ^^b

/

패럴렉스 이펙트_06 : 스크롤 값에 따라 텍스트를 순차적으로 나오게 하기 패럴렉스 이펙트_06 : 스크립트로 각 span에 CSS 애니메이션 적용하기 방법은 여러가지가 있겠지만 각 요소의 offsetTop값이 scrollTop(현재 스크롤 값) 이상이 되면 .split span의 요소를 찾아 애니메이션을 적용시키는 이펙트를 구현해보도록 하겠습니다! HTML 코드 : 뼈대 간단한 html 구조를 만들어 뼈대를 구성해보도록 합시다! 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다..
2022. 9. 29.
서치 이펙트_05 : 중요도 갯수에 부합하는 CSS 속성 & 중요도에 따른 CSS 속성 찾기! 서치 이펙트_05 : 중요도 갯수에 부합하는 CSS 속성 & 중요도에 따른 CSS 속성 찾기! 방법은 여러가지가 있겠지만 switch와 dataset을 통해 중요도와 특수한 조건에 따른 결과를 찾아 출력시켜주는 searchEffect를 구현해보도록 하겠습니다~~ HTML 코드 : 뼈대 간단한 html 구조를 만들어 뼈대를 구성해보도록 합시다! filter()를 이용하여 속성의 중요도 보여주기 CSS 속성 검색하기 ☆☆☆☆☆ ★☆☆☆☆ ★★☆☆☆ ★★★☆☆ ★★★★☆ ★★★★★ 1개 이상 2개 이상 3개 이상 4개 이상 찾은 속성 갯수 : 0 CSS 코드 : 살 이제 뼈대를 구성하였으니 살을 붙여 searchEffect를 구현하기위한 준비를 마치겠습니다. * { margin: 0; padding: 0; b..
2022. 9. 29.
배열 수정/찾기/포함여부를 알 수 있는 5가지 메서드에 대해서 알아보자! slice/splice slice : 어떤 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다. splice : 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. const arrNum1 = [100, 200, 300]; const arrNum2 = [400, 500, 600]; const arrConcat = arrNum1.concat(arrNum2); const arrSpread = [...arrNum1, ...arrNum2]; indexOf/LastIndexOf indexOf : 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환하고 존재하지 않으면 -1을 반환해요 LastIndexOf : 주어진 값과 일..
2022. 9. 29.
서치 이펙트_04 : map/find를 사용하여 원하는 CSS 속성 찾기! 서치 이펙트 만들기! JS의 map/find를 적절히 활용해 원하는 CSS 속성을 찾는 이펙트를 만들어보도록 하겠습니당~~~ HTML 코드 : 뼈대 간단한 html 구조를 만들어 뼈대를 구성해보도록 합시다! 쏘-스보기 퀴-즈 이펙트 쏘-스 보기.exe HTML JAVASCRIPT CSS X find()를 이용하여 속성을 검색하면 설명 보여주기 CSS 속성 검색하기 검색하기 속성을 검색하시면 설명이 표시됩니다!! 찾은 속성 갯수 : 0 CSS 코드 : 살 이제 뼈대를 구성하였으니 살을 붙여 searchEffect를 구현하기위한 준비를 마치겠습니다. * { margin: 0; padding: 0; box-sizing: border-box; font-family: "NexonLv1Gothic"; color: ..
2022. 9. 29.
728x90
반응형

#HASH_TAGS

-

1

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

티스토리툴바