일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- forEach
- React
- scrollY
- insertAdjacentHTML
- width
- classList
- Sticky
- addEventListener
- 반복문
- html
- swiper
- 애니메이션
- scroll
- css
- localstorage
- getBoundingClientRect
- scrollevent
- 스크롤
- swiperjs
- Animation
- input
- 확장성
- Hover
- 이벤트리스너
- NodeList
- For
- mousemove
- NAV
- JavaScript
- pointermove
- Today
- Total
목록전체 글 (56)
ZeroToHunnit Coding
React 처음 까는거부터 난관이긴 했는데 이 때 너무 멘붕이었어서 담에 새로 프로젝트 만들 때 React 까는거 기록해놔야겠음. 요거는 뭐 그냥 공부한거 정리하고 주저리주저리 쓸거임. 1. React깔면 App.js에 function App() {}안에 짜면됨. 2. 그냥 html에서는 class=''로 쓰면 되지만 리액트에선 className=''로 써야함. 3. 변수로 저장해서 {변수명}으로 쓸 수 있음 4. 그냥 변수말고 useState라는 것도 있음. 처음에 useState쓰면 제일 위에 import useState같은거 자동으로 생김. 안생기면 import { useState } from 'react' 넣어줘야함. 5. useState문법은 let [변수명, 변수 다루는 함수명] = useSt..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/b5LwyP/btsDkUghnTj/PsiBtEKdwXWo836FEx5eok/img.gif)
각 박스에 도달하면 하단 고정 메뉴안에 해당되는 박스의 메뉴가 활성화되고 큰 섹션을 나가면 모든 활성화가 사라지는 ui를 만들어 보았다. HTML box1 box2 box3 box4 box1 box2 box3 box4 섹션안에 박스 네개와 list가 포함된 menu박스를 만들어주었다. CSS .section{ margin-top: 400px; margin-bottom: 400px; background-color: #999; padding: 200px; } .box{ width: 100%; height: 150vh; margin-top: 200px; background-color: black; color: white; font-size: 60px; } .menu{ position: sticky; botto..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/2StmM/btsDhgqoE3S/tFIukRU67kshwGSk6n4rxk/img.gif)
화질이 안좋아서 잘 안보이지만 선택한 값을 모두 보여주는 걸 구현해보았다. HTML 무엇을 사실건가요? 모자 셔츠 free 사이즈를 선택해주세요. 95 100 105 form 태그 안에 select문 3개를 미리 담아두고 result값을 출력할 곳을 따로 만들어 두었다. CSS form{ margin-left: 200px; margin-top: 200px; } #apparel, #hat-size, #shirts-size{ font-size: 40px; padding: 40px; } #hat-size, #shirts-size{ visibility: hidden; opacity: 0; transition: all 0.3s; position: absolute; } .on{ visibility: visible ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bM5VSW/btsC83k5xxU/ZGdjiajiiH7InNI02Ofsy1/img.gif)
위와 같이 마우스를 갖다 대면 한 글자씩 위쪽으로 파도타기하면서 없어지고 밑에서 한 글자씩 다시 올라오는 애니메이션을 구현했다. HTML 안 녕 하 세 요? 반 갑 습 니 다. 안 녕 하 세 요? 반 갑 습 니 다. 텍스트 박스를 2개 만들어주고 각 글자들을 span태그에 따로따로 담았다. CSS .box { margin-top: 200px; margin-left: 200px; overflow: hidden; cursor: pointer; position: relative; } .text span, .hover-text span{ display: inline-block; transition: all 0.3s; font-size: 60px; } .hover-text{ position: absolute; t..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/d8DWWF/btsC312tusB/kI5FRnJMEoyomv6una0Kq0/img.gif)
위와 같이 배경에 따라 글자의 색이 자동적으로 변하는 신기한 CSS 코드 'mix-blend-mode'가 있다. HTML 안녕하세요~ CSS .section{ width: 100vw; height: 100vh; position: relative; } .up{ width: 100%; height: 50%; background-color: black; } .down{ width: 100%; height: 50%; background-color: white; } .letter{ font-size: 80px; text-align: center; mix-blend-mode:difference; color: white; rotate: 90deg; position: absolute; top: 50%; left: 50..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/kZlLx/btsC8WFs3Dw/7rgVRboN92XLxqPK2YeU7k/img.gif)
여러 개의 타이틀이 있고, 각 타이틀에 마우스를 대면 해당 타이틀에 맞는 컨텐츠를 보여주고, 다른 타이틀에 마우스를 올리면 이전에 보여졌던 컨텐츠는 숨기고 새로운 컨텐츠를 보여주는 기능을 만들었다. HTML A site 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. 여기는 A site입니다. B site 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. 여기는 B site입니다. C site 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C site입니다. 여기는 C ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bOyeqZ/btsC9mRn6Tv/xrvmcYb24Pc2jYT44HqqWk/img.gif)
이런 신기한 폰트 애니메이션을 만들어보았다. HTML H E L L O W O R L D p태그에 따로따로 담아주었다. CSS @import url('https://fonts.googleapis.com/css2?family=Hepta+Slab:wght@1..900&display=swap'); .font{ font-family: "Hepta Slab"; text-align: center; margin-top: 300px; font-size: 60px; font-variation-settings: "wght"100; white-space: nowrap; float: left; animation: ani infinite cubic-bezier(0.215, 0.610, 0.355, 1) 2s; } .font:n..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CpGd4/btsCUxU5u5i/kG0Hg9F6ZayagdVnwKAD3k/img.gif)
위와 같이 스크롤 함에 따라 큰 박스가 3개로 나눠지고 뒤집어져서 뒷면이 나오는 기능을 구현해봤다. HTML 카드1 뒷면 카드2 뒷면 카드3 뒷면 스크롤 ㄱㄱ CSS .section{ height: 6000px; } .wrapper{ width: 100%; height: 100vh; position: sticky; top: 0; display: flex; justify-content: center; align-items: center; background-color: black; } .grid{ display: grid; width: 1200px; height: 50vh; grid-template-rows: 1fr; grid-template-columns: 1fr 1fr 1fr; grid-auto-col..