화면 뒷배경 어둡게 만들어주는 모달창 만드는법 (!)

웹사이트를 구현하다보면 모달창을 구현해야하는 경우가 굉장히 많다.

이번 Kidsney project하는 중에도 이미 세개나 만들었다; ㅎ

모달창을 만드는 방식은 생각보다 간단한데 물론 방식은 여러 방법이 있지만 내가 만드는 방식을 공유해보겠다(!)

모달창 만들 때 필요한 레이아웃

1. 화면 전체를 감싸줄 태그 하나 필요
2. 모달창 메세지를 담아주는 태그 하나 필요

대충 이런 구조 (react 내에서 적는다고 가정)

<div className = "modal-box">
<div className = "modal"></div>
</div> 

모달창 만들 때 필요한 style 속성

1. 화면 전체를 감싸주는 태그의 스타일 속성(modal-box)

• position은 absolute 혹은 fixed로!
• 위치 지정은 필수! top : 0; left :0으로 지정해주기
• 너비와 높이 값 지정도 필수! weight : 100vw; height : 100vhv
• 화면의 투명도 조정해주기 background-color : rgba(0,0,0,0.2);
• z-index값도 줘야함! z-index : 100

화면 전체의 투명도를 낮춰준다.

여기서 만약! 모달창 메세지를 화면의 정중앙에 위치하게 만들고 싶다면 flex 속성 줄 수 있다.

display :flex; 
justify-content:center;
align-items :center;

2. 모달창 메세지를 담아주는 곳은 내가 원하는 너비나 혹은 padding값 지정해주면 됌! 그럼 끝-!

참 쉽쥬?

그럼 이제 자야겠다,, 졸려 😵‍💫 !