본문 바로가기
HTML, CSS

[CSS] 모달 스타일 기록용

by 주갬 2025. 4. 10.
반응형

화면 크기 늘리든 줄이든

1. 화면 크기 늘렸을 때 x표시 잘 보이면서

2. 화면 크기 줄였을 때 모달 한없이 안늘어나게 하는 법

 

    .modal-header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        padding: 1rem 1rem;
        border-bottom: 1px solid #dee2e6;
        border-top-left-radius: calc(0.3rem - 1px);
        border-top-right-radius: calc(0.3rem - 1px);
    }

    .modal-body {
        max-height: calc(100% - 60.5px - 62.5px);
        height: calc(100% - 60.5px - 62.5px);
        overflow-y: auto;

        .container {
            width: calc(100% - 28px);
            height: calc(100% - 28px);

            .content-row {
                height: calc(100% - 42px - 58px - 46px);

                .col-sm-10 {
                    height: 100%;
                }
            }
        }
    }

    .modal-content {
        width: 80%;
        height: 80%;
        max-height: 950px;
    }

    .modal-header:before,
    .modal-header:after {
        display: none;
    }
반응형