우당탕탕 개발일기
모달창 만들기 본문
모달창 배경 만들기
https://penguingoon.tistory.com/249
[CSS] 모달창 + 어두운 배경 반드는 기본적인 방법
안녕하세요! 오늘은 아래와 같은 모달창을 만들 때 필요한 기법(?)을 소개하도록 하겠습니다. 모달창이란 사용자와의 상호작용을 위해 제공되는 인터페이스의 한 종류이비다. 보통 모달창을 띄
penguingoon.tistory.com
모달창 화면 크기에 맞춰 중앙에 위치하게 하는 css
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
https://hyunipad.tistory.com/36
모달창 중앙정렬 하기
모달창 안의 레이어를 화면 크기에 상관없이 중앙에 배치하는 CSS position: fixed; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform
hyunipad.tistory.com
모달창 애니메이션 적용하기
: @keyframes, setTimeOut
https://phrygia.github.io/react/2022-03-03-react-modal/
[react] transition이 적용된 Modal 만들기
내 블로그에서 가장 조회수가 높은 포스팅은 react 모달 포스팅이다. ([react] 모달 팝업창 만들기) 전에 만들었던 Modal은 트랜지션이 적용되지 않았었다. 최근 프로젝트를 만들면서 트랜지션이 적
phrygia.github.io
'What I Learned > React' 카테고리의 다른 글
| [React] useEffect 에러 : useEffect must not return anything besides a function, which is used for clean-up. (0) | 2023.04.03 |
|---|---|
| 리액트로 선형 타임라인 만들기 (0) | 2023.01.31 |
| 아토믹 디자인(Atomic Design) (0) | 2022.12.23 |
| map 안사용했는데도 key값 오류 뜰 때 (0) | 2022.09.21 |
| Whitespace text nodes cannot appear as a child of <tr> 에러 해결 (0) | 2022.09.15 |
