모바일 모달 만들기

모바일 모달을 만들었습니다.

쉽지만 만들면서 레이아웃을 잡을 때 든 생각을 기록하기 위해서 글을 씁니다.

 

먼저 백그라운드를 잡아주어야합니다. 코드는 다음과 같습니다.

const ModalBackground = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.8);
`;

 

이제 모달의 위치를 잡아주어야하는데, 흔히 모달을 정중앙에 위치시키기 위해서는 transform 을 많이 사용합니다. 다음과 같이 말입니다.

　top:50%;
　left:50%;
　transform: translate(-50%,-50%);

 

하지만 이번에는 calc 를 사용해서 중앙을 계산했습니다.

--vw 단위는 모바일 기기에서의 가로폭을 css 사용자 변수에 담은 것이다. 자세한 내용은 다음 글을 참고하면 좋을 것 같습니다.

2022.07.24 - [공부기록/웹 개발] - [반응형] 모바일 환경에서 스크롤 방지, 모바일에서 url 창을 제외한 브라우저 크기의 vw , vh 만들기

그렇게 만든 변수를 사용하여  모달의 width는 80% 크기로 잡아주고, height는 200px으로 잡아주었습니다.

height는 픽셀로 잡은 이유는 세로로 긴 스마트폰일 경우에 모달의 세로길이가 너무 커져 보기가 좋지 않을 것이라고 생각했기 때문입니다.

 

그후 top 과 left 를 브라우저의 중앙 위치에서 50% 되는 지점으로 정해주고 , 세로크기 가로크기의 절반을 빼주는 겁니다.

왜 빼주어야하냐면 저의 다음글을 참고해주세요.

2022.06.06 - [공부기록/커뮤니티 프로젝트] - css 정중앙에 위치시키기

position: absolute;
top: calc(var(--vh) * 50 - 100px);
left: calc(var(--vw) * 50 - calc(var(--vw) * 40));
background-color: white;
border-radius: 20px;
width: calc(var(--vw) * 80);
height: 200px;
border: 1px solid black;

 

그다음 기록하고 싶은거는 줄 간격을 margin-top으로 잡지않고 line-height로 잡은 것이네요.

 

참고자료

https://penguingoon.tistory.com/249

[CSS] 모달창 + 어두운 배경 반드는 기본적인 방법