웹사이트를 구현하다보면 모달창을 구현해야하는 경우가 굉장히 많다.
이번 Kidsney project하는 중에도 이미 세개나 만들었다; ㅎ
모달창을 만드는 방식은 생각보다 간단한데 물론 방식은 여러 방법이 있지만 내가 만드는 방식을 공유해보겠다(!)
대충 이런 구조 (react 내에서 적는다고 가정)
<div className = "modal-box">
<div className = "modal"></div>
</div>
top : 0; left :0
으로 지정해주기weight : 100vw; height : 100vhv
background-color : rgba(0,0,0,0.2);
z-index : 100
화면 전체의 투명도를 낮춰준다.
여기서 만약! 모달창 메세지를 화면의 정중앙에 위치하게 만들고 싶다면 flex 속성 줄 수 있다.
display :flex;
justify-content:center;
align-items :center;
참 쉽쥬?
그럼 이제 자야겠다,, 졸려 😵💫 !