모달을 띄울때 생각해야할 부분들

페이지를 구성하면서 비동기통신을 사용해서 바로바로 한 화면에서 작업하게끔 하고싶어서 모달은 틀을 잡아놓고 innerHTML로 보여주고, 데이터전송을 ajax를 사용했다.

세로 화면인 모바일을 생각하고 작업을 했기 때문에 놓치고 있는 부분이 있었는데.

바로 input이 focus 되었을 때 키패드가 올라오면서 화면의 비율이 landscape가 된다는것.. 아직 미디어쿼리는 적용을 안해서 이것 까지도 큰 문제는 없었지만 모달 내부에 표시되어야할 정보들이 

이런식으로 가려진다는 점이다.

화면을 가로로 했을때, 키패드가 올라왔을 때 둘다 동일한 현상.

모달이 화면에 표시될 때 모달을 부각 시키기위해 모달 밖의 스크롤을 막았기 때문에 스크롤도 불가능한 상황이

연출된다..

 

모달내부에 overflow:scroll을 적용하면 어떻게 해결 할 수 있겠지만 

사용자가 표시된 부분외에 스크롤을 내려야 볼 수 있다는 것을 어떻게 알게 만들어 줘야할지 생각해볼 필요가 있을 것 같다.

 

당근마켓, 유튜브 등등에서는 보통 모달을 사용해도 화면 비율 관계없이 동일하게 표시 될 수 있는 사이즈의 모달만 띄우는 것같고

외에는 화면 전체를 사용하는 모습이었다.