본문 바로가기

아래로 스크롤 해주세요!

My Reference Book

-

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

HTML

HTML 태그 톺아보기

HTML

자세히보기

CSS

CSS 속성 톺아보기

CSS

자세히보기

JAVASCRIPT

JS 실행문 톺아보기

JAVASCRIPT

자세히보기

최신댓글

총 방문자

728x90

분류 전체보기176

#검색결과

총 176개를 찾았어요 ^^b

/

서치 이펙트 07 서치 이펙트_07 각 요소가 정확히 있는지 확인 후 일정 시간이 지나면 SVG와 맞은 갯수를 출력해주는 예제를 구현해보도록 하겠습니다 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 서치게임, 오디오, 꿀벌 SVG 형성을 위한 HTML 뼈대이므로 잘 작성해줍니다 🏄‍♂️ CSS 속성 검색 이벤트 CSS 랜덤 검색하기 2분 동안 CSS 속성을 많이 검색하면 점수가 올라갑니다. 기억이 나지 않으면 힌트보기를 한번 이용할 수 있습니다. 2:00 검색하기 버튼을 누르면 게임이 시작됩니다. 전체 속성 갯수 : 0 현재 맞춘 갯수 : 0 다시 도전하기 CSS 코드 : 애니메이션 본 CSS를 통해 살을 붙여줍니다 👀 /* * { margin: 0; padding: 0; box-sizing: borde..
2022. 10. 21.
슬라이드 이펙트 06 슬라이더 이펙트_06 이미지 5개를 기준으로 맨 뒷부분에 첫 이미지를, 맨 앞부분에 마지막 이미지를 추가해 마지막 이미지에 도달시 순간적으로 첫 이미지로 이동시켜 무한으로 이동시키는것과 같은 효과를 지닌 예제를 만들어 보도록 하겠습니다 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 슬라이드를 구현하기 위해 하단과 같이 코드를 작성해 뼈대를 생성해줍시다 🏄‍♂️ 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS 코드 : 애니메이션 CSS를 통해 각각 dot과 active 클래스를 생성해 슬라이드 닷 까지 구성해줍니다. 👀 /* slider */ .slider__wrap { /* background: #000; */ width: 100%; height: 100vh; /*..
2022. 10. 21.
슬라이드 이펙트 07 슬라이더 이펙트_07 닷 메뉴를 클릭하면 해당 이미지로 이동하고 플레이/정지 클릭 여부에 따라 슬라이드를 멈춰주는 예제를 만들어보도록 하겠습니다~ 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 슬라이드를 구현하기 위해 하단과 같이 코드를 작성해 뼈대를 생성해줍시다 🏄‍♂️ 이미지1 이미지2 이미지3 이미지4 이미지5 prev next CSS 코드 : 애니메이션 CSS를 통해 각각 dot과 active 클래스를 생성해 슬라이드 닷 까지 구성해줍니다. 👀 /* slider */ .slider__wrap { /* background: #000; */ width: 100%; height: 100vh; /* background-color: #ccc; */ display: flex; align-i..
2022. 10. 21.
패럴렉스 이펙트_07 : 각 문장에 딜레이를 걸어 효과주기 🐢 패럴렉스 이펙트_07 각 span태그가 감싸여있지 않은 문장들을 span태그로 감싸 각 이미지와 span태그에 after/before 요소를 통해 효과를 주도록 해보겠습니다 👩🏻‍💻 HTML 코드 HTML 코드는 크게 신경쓸것이 없으나, 각 desc에 data-delay를 추가시켜 각 애니메이션에 딜레이를 줄겁니다!🏄‍♂️ 01 section1 우리는 사랑하는 친구들에 의해서만 알려진다. 02 section2 사랑은 눈으로 보지 않고 마음으로 보는 거지. 03 section3 두 분은 상처 하나 입지 않고, 대용사가 된 셈이오. 04 section4 그의 믿음은 그가 쓰는 모자의 유행처럼 변한다. 05 section5 잘 있거라! 우리가 언제 다시 만날지는 아무도 모른다. 06 section6 죄를 짓고..
2022. 10. 7.
728x90
반응형

#HASH_TAGS

-

1

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

티스토리툴바