웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
부트스트랩(Bootstrap)을 사용하여 모달창을 만드는 경우 세로정렬하는 방법에 대하여 알아봅니다. 부트스트랩 창을 띄우면 위쪽 영역에 모달창이 나타납니다. 이를 세로방향의 가운데로 위치시키는 방법입니다.
만약 모달창의 id 값이 myModal이라면 아래와 같이 css style을 설정합니다.
여기서 위 태그 영역의 height의 절반 만큼 margin-top의 마이너스 값을 설정하도록 합니다. 그리고 top을 사용하여 50%를 적용합니다. 정확히 가운데 위치하려면 모달창 크기의 1/2 만큼을 margin-top에서 빼주는 것이 가장 중요합니다. 즉, 콘텐츠의 높이가 100px인 경우 -50px;이 필요합니다.
이제 모달창은 세로정렬되어 나타나게됩니다.
만약 모달창의 id 값이 myModal이라면 아래와 같이 css style을 설정합니다.
<div id="#myModal" class="modal fade">
Vertical align for bootstrap modal.
</div>
Vertical align for bootstrap modal.
</div>
여기서 위 태그 영역의 height의 절반 만큼 margin-top의 마이너스 값을 설정하도록 합니다. 그리고 top을 사용하여 50%를 적용합니다. 정확히 가운데 위치하려면 모달창 크기의 1/2 만큼을 margin-top에서 빼주는 것이 가장 중요합니다. 즉, 콘텐츠의 높이가 100px인 경우 -50px;이 필요합니다.
#myModal {
top: 50%;
margin-top: -50px;
}
top: 50%;
margin-top: -50px;
}
이제 모달창은 세로정렬되어 나타나게됩니다.
아래의 글도 찾고 계시지 않나요?