본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

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

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

JS 응용하기32

#검색결과

총 32개를 찾았어요 ^^b

/

서치 이펙트_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.
서치 이펙트_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.
마우스 이펙트_05 : 원근감을 이용해 좌표값에 따라 3d 효과 주기! 마우스 이펙트 만들기! JS의 금붕어의 눈처럼 마우스가 움직였을때 명언이 튀어나올듯한 효과를 구현해볼게요! HTML 코드 : 뼈대 마우스 이펙트의 핵심은 cursor를 구성하는것이에요! 꼭 간단한 div를 통한 Cursor를 구성하도록 합시다! If you feel refreshed when you wake up, yes, you are late.! 잠에서 깨어났을때 개운함을 느꼈다면 예, 지각입니다. CSS 코드 : 살 마우스가 이미지에 닿으면 반전이 되게끔 "mouse__cursor" 클래스에 "mix-blend-mode: difference;"를 설정해줍시다! 이후에는 여러분의 쉽게 늘어가는 여러분의 몸무게처럼 간단하게 html에도 css를 통해 살을 붙여봅시다! .mouse__wrap { disp..
2022. 9. 29.
마우스 이펙트_04 : 마우스를 추적하는듯한 백그라운드 효과 구현하기! 마우스 이펙트_04 : 마우스를 추적하는 백그라운드 효과 만들어보기! 마우스가 위치한 곳에따라 백그라운드 이미지가 마우스를 따라가는 효과를 만들어보도록 하겠습니다! HTML 코드 간단하게 HTML을 구성해 뼈대를 구축해봅시다! winner winner chicken dinner! 잠을 일찍 자는자가 세상을 지배한다. CSS 코드 간단하게 예제를 위해 살을 붙여주기 위해서 하단의 CSS를 작성해 붙여넣어 줍니다. /* mouseType */ .mouse__wrap { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; color: #fff; overflow:..
2022. 9. 22.
728x90
반응형

#HASH_TAGS

-

1

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

티스토리툴바