[react] 반응형 모달 만들기

내가 만든 모달이 내 모니터에서는 내가 원하는 위치에 뜨지만 다른 팀원분들의 모니터에서는 그렇지 않다는 것을 발견했다.

프로젝트에서 사용되었던 반응형 모달을 만드는 코드를 간단하게 살펴보자. 나중에 또 볼 수도 있으니까! 핵심은 viewport 이다!

 

먼저 모달 컨테이너의 사이즈와 위치가 viewport에 따라 달라질 수 있도록 수정한다.

width: 80vw;
height: 90vh;
position: fixed;
top: 5vh;
left: 10vw;

모달을 닫는 x 버튼도 수정한다.

> span.close-btn {
    position: absolute;
    top: 1vh;
    right: 1vw;
    cursor: pointer;
    font-size: 30px;
  }

모달 컨테이너 내부 컨텐트의 사이즈도 수정한다.

 @media screen and (max-width: 1080px) {
    margin: 5vh 7vw;
  }

반응형 모달 완성