| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
Tags
- react
- frontend
- components
- 리액트기초
- develop
- form
- Package
- antd
- type
- error
- FRONT
- vscode
- NeXT
- 이미지
- Chart
- 프론트엔드개발
- 시멘틱태그
- CSS
- npm
- Download
- VUE
- axios
- 리액트
- 상태관리
- err
- 프론트엔드
- JavaScript
- vue-cli-service
- TradingVIew
- useState
Archives
- Today
- Total
목록2025/11/14 (1)
개발쬬
[React] tailwind 를 활용한 아코디언 UI 부드럽게 아래로 펼쳐지는 애니메이션 효과 적용
이번에는 웹사이트를 만들면서 가장 자주 사용하는 아코디언 UI 를 만들어봤습니다.별로 어렵지 않고 대중적인 UI 설계 방식이지만 tailwind 로 쉽게 구현을 원하는 분들을 위해 공유드립니다. section > Conatiner (커스텀UI) > ul > li > div 로 설계- 펼쳐짐을 감지할 button | div 요소 (grid grid-row 를 사용해 0 과 1 사이로 내부 높이를 감지합니다)- 펼쳐질 아이템 (div 요소를 사용하지만 opacity 0 으로 초기화) 아코디언 펼치기 전 아코디언 펼치기 후하위 요소는 DOM으로 구성이 가능합니다. (tsx 파일) 애니메이션 효과는 duration 을 사용하여 임의로 조절이 가능하며 부드럽게 펼쳐지는 UI 구현이 가능합니다. 코드 공유코드 ..
쬬의 React
2025. 11. 14. 15:57