반응형
250x250
Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
Tags
- 반복문
- NAV
- scrollevent
- addEventListener
- 스크롤
- 확장성
- width
- NodeList
- Animation
- classList
- localstorage
- forEach
- JavaScript
- getBoundingClientRect
- React
- mousemove
- pointermove
- css
- input
- scroll
- swiper
- scrollY
- For
- 애니메이션
- html
- swiperjs
- 이벤트리스너
- Hover
- insertAdjacentHTML
- Sticky
Archives
- Today
- Total
목록메뉴 (1)
ZeroToHunnit Coding
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4Hnec/btsEkfeorJG/GXQvQcYobLDMqYlhGwnBv1/img.gif)
아주 간단하게 아코디언 메뉴를 만들 수 있다. 저는 이렇게 아코디언 메뉴와 함께 해당 사진도 옆에서 나오게하는 애니메이션을 만들어 보았다. HTML 1번 사진입니다. 2번 사진입니다. 3번 사진입니다. 4번 사진입니다. 5번 사진입니다. 리스트 1번입니다. 리스트 1번 내용입니다. 리스트 2번입니다. 리스트 1번 내용입니다. 리스트 3번입니다. 리스트 3번 내용입니다. 리스트 4번입니다. 리스트 4번 내용입니다. 리스트 5번입니다. 리스트 5번 내용입니다. aco-list안에 content를 넣어준다. CSS .section{ padding: 0 120px; } .inner{ width: 100%; display: flex; justify-content: space-between; } .photo-box..
JAVASCRIPT
2024. 2. 3. 17:33