일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- 반복문
- getBoundingClientRect
- swiperjs
- pointermove
- localstorage
- mousemove
- NAV
- classList
- html
- width
- scrollevent
- 애니메이션
- Hover
- 확장성
- swiper
- 스크롤
- 이벤트리스너
- insertAdjacentHTML
- addEventListener
- Sticky
- scroll
- input
- React
- forEach
- For
- scrollY
- Animation
- JavaScript
- NodeList
- css
- Today
- Total
목록Transition (2)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/S11F5/btsDRnJq8yL/GUKQ10Jpxvf7MbvMxzsvOK/img.gif)
요즘 벤치마킹을 하다보면 저렇게 마우스를 올리면 사진이 뜨는 ui를 많이 발견할 수 있다. 그래서 간단하게 만들어보았다. HTML 1번 리스트 2번 리스트 3번 리스트 리스트는 ul li로 만들어주고 이미지를 띄울 공간을 미리 만들어주었다. CSS ul{ padding: 40px; } li{ padding: 80px 0; font-size: 40px; border-bottom: 4px solid #777; cursor: pointer; position: relative; transition: all 0.3s; } li:last-child{ border-bottom: none; } .img-box{ width: 300px; height: 300px; position: absolute; top: 50%; l..
오.. 이제 7일차야..? 7일차치고는 뭔가 많이 알아가는거 같기도 하고..? 근데 했던거 다시하면 제대로 못하는 나를 보면서 머리 싸매고 있기도 하지만.. 언젠간 잘하겠지 뭐!! 1. ajax쓰려면 XMLHttpRequest (옛날거라 안씀), fetch() (이거 바닐라 자바스크립트할 때도 써봤는데), axios 라이브러리 쓰면 됨. 근데 리액트에서 axios 라이브러리 편함 2. axios 쓰려면 npm install axios 하고 import 해줘야함 3. axios.get('url').then(콜백함수).catch(콜백함수) 이런식임. fetch랑 비슷하네. then은 데이터 가져오는거 성공했을 때, catch는 실패했을 때 쓰는 공간 4. 동시에 ajax 요청 여러개 하려면 Promise.a..