반응형 레이아웃 숙제 질문

[황성철]

코드가 정상적으로 작동하긴 하는데 생각보다 간단하게 만들어져서
부족한 부분이 있는지 봐주시면 감사하겠습니다.
================HTML================
<div class="main-container">
        <div class="main-item">
            <h4>title1</h4>
            <p>element</p>
        </div>
        <div class="main-item">
            <h4>title2</h4>
            <p>element</p>
        </div>
        <div class="main-item">
            <h4>title3</h4>
            <p>element</p>
        </div>
        <div class="main-item">
            <h4>title4</h4>
            <p>element</p>
        </div>
    </div>

================CSS================

.main-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-item {
    width: 25%;
    padding: 5vw;
    text-align: center;
    font-size: large;
}

@media screen and (max-width: 1200px) {
    .main-container {
        flex-wrap: wrap;
    }

    .main-item {
        font-size: medium;
    }
}

@media screen and (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    
    .main-item {
        font-size: small;
    }
}

[codingapple]

768~1200사이즈에선 이상하게보일수도 있을듯요

[글쓴이]

글