[Nextjs] 모달(Modal) 만들기
모달(Modal)이란, 원하는 내용을 화면 위에 띄워 표현하는 방식이다. 기본적으로 많은 UI 라이브러리에서 쉽게 제작이 가능하다. 오늘은 Modal을 Component로 만들고 Nextjs/React에 적용하는 법을 알아보자. 모달을 만들기전에 알아야할 개념중 첫번째가 Portals라는 개념이다. 우리는 필요한 위치에 Component로 만들어 모달을 넣어줄 것이다. 그리고 추가로, 다른 Component보다 앞에 표시가 되려면 z-index를 사용하여 표현을 한다. 이때, 중요한 것은 부모의 z-index가 작다면, 자식의 z-index가 아무리 크더라도 부모의 z-index를 따르게 된다. 그렇기 때문에 Modal 자체를 종속적으로 Component 내부에 넣으면 다른 컴포넌트보다 앞에 있지 않는 ..
Web/React
2023. 9. 25. 22:00
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- NextJS
- 클라우데라
- JavaScript
- Deque
- BFS
- Express
- TensorFlow
- logout
- useHistory 안됨
- 자료구조
- error:0308010C:digital envelope routines::unsupported
- nodejs
- Vue
- DFS
- vuejs
- pandas
- login
- react
- mongoDB
- react autoFocus
- next.config.js
- useState
- django
- Queue
- typescript
- nextjs autoFocus
- Python
- 자연어처리
- UserCreationForm
- read_csv
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
글 보관함