본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

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

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

분류 전체보기174

#검색결과

총 174개를 찾았어요 ^^b

/

즐거운 오답노트~~🌸 오답노트 다른분들꺼 보고 틀 자체가 다르단걸 알고서 이제서야 올리네요 🥲 많이 틀렸으니 많이 적어야겠죠,,, 눙물 납니다...
2022. 10. 3.
마우스 이펙트_06 : 좌표에 따라 텍스트를 움직이고 포인터에 변화주기! 마우스 이펙트 만들기! 마우스 위치에 따라 이미지들이 좌우로 움직이고 텍스트에 마우스가 올라가면 커서가 커지는 효과를 만들어볼게요! HTML 코드 : 뼈대 마우스 이펙트의 핵심은 cursor를 구성하는것이에요! 꼭 간단한 div를 통한 Cursor를 구성하도록 합시다! Pain Past Pain Past is pleasure. is pleasure. 지나간 고통은 지나간 고통은 쾌락이다. 쾌락이다 CSS 코드 : 살 1. 마우스가 이미지에 닿으면 반전이 되게끔 "mouse__cursor" 클래스에 "mix-blend-mode: difference;"를 설정해줍시다! 2. 화면을 절반으로 나눠 왼쪽에 오렌지 박스를 하나 만들어 놓습니다! .mouse__wrap { color: #fff; height: 10..
2022. 9. 29.
패럴렉스 이펙트_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.
728x90
반응형

#HASH_TAGS

-

1

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

티스토리툴바