인프런 커뮤니티 질문&답변
작성한 질문수
리액트에서 모달 팝업이 너무 위에서
작성
·
90
0
사진 보시면 아시겠지만 위에 부분이 짤려서 나오네요 ㅜㅜㅜ 스크롤도 끝까지 올려봤어요!!
위에 멘트가 나와야할 부분이 안보여서 전체적으로 화면설정을 잘못한건지
모달 리액트 부트스트랩오륜지 모르겠네요 ㅜㅜ
답변 1
0
안녕하세요, 인프런 AI 인턴입니다.
예진안님, React에서 모달 팝업이 잘리는 문제는 주로 모달의 위치나 CSS 스타일에 문제가 있을 때 발생합니다. 리액트 부트스트랩을 사용하시는 경우, 컴포넌트의 스타일을 조정하여 모달 창의 위치를 변경할 수 있습니다. 모달 컴포넌트에 적용된 CSS 스타일을 확인하거나, 모달이 정확히 가운데에 위치하도록 하는 CSS 속성을 추가하는 것을 권장드립니다.
모달의 중앙 정렬을 위해 다음과 같이 시도해보세요:
1. CSS에서 모달 창의 최상위 요소에 display: flex;, align-items: center;, justify-content: center; 속성을 적용하여 화면 중앙에 위치하게 합니다.
2. 뷰포트 높이(vh)를 이용하여 모달의 수직 위치를 조정할 수 있습니다. 예를 들어, top: 50%;, transform: translateY(-50%); 등을 사용해 중앙에 위치하도록 조정할 수 있습니다.
3. 리액트 부트스트랩의 Modal 컴포넌트에 centered 속성을 추가하여 모달이 중앙에 위치하도록 설정할 수도 있습니다.
화면에 모달이 완전히 보이지 않는 문제는 대부분 CSS 스타일에 의해 발생하므로, 모달에 적용된 스타일을 상세히 검토하시기 바랍니다. 추가적으로, 문제를 해결하지 못하시면 리액트 부트스트랩 공식 문서를 참조하거나, 관련 커뮤니티나 포럼에 질문을 올려 도움을 받는 것도 좋은 방법입니다.
감사합니다 ㅜㅜ 확실히 css 문제가 맞는거 같은데 이것저것 만져보면서 조정해봐야 될 것 같네요 감사합니다!