[CSS] Media Query(미디어 쿼리)

 

if 문과 비슷하게, 조건에 따라 style을 다르게 적용할 수 있음 

 

 

기본적인 문법은 다음과 같음

@media (조건) {
  ~style 관련 내용~
}

 

 

조건 관련해서 기본적으로 알아두면 좋은게 max-width와 min-width!

• max-width : 조건에 설정된 값보다 작거나 같은 경우 적용
• min-width : 조건에 설정된 값보다 크거나 같은 경우 적용

/* 브라우저 화면 너비가 790px 이하인 경우 */
@media(max-width:790px){
    .container{
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
    }

    .main_picture{
        flex: 0 0 auto;
        width: 100%;
        height: auto;
        display: flex;
    }

    .main_picture img{
        width: 100%;
        height: 100%;
    }

    .main_text{
        padding: 20px;
    }

    mark{
        background-color: rgb(255, 241, 84);
        border-radius: 4px;
    }

    #first{
        background-color: rgb(255, 54, 19);
        color: white;
    }

    #second{
        background-color: black;
        color: rgb(255, 241, 84);
    }

    button{
        padding: 10px 30px;
        font-family: 'asindinarub';
        border: none;
        font-weight: 500;
        font-size: 18px;
        border-radius: 30px;
        margin-top: 30px;
        width: 100%;
    }
}

/* 브라우저 화면 너비가 791px 이상인 경우 */
@media(min-width:791px){
    .container{
        width: 100%;
        height: auto;
        margin: 0 auto;
        display: flex;
    }

    .main_picture{
        flex: 0 0 auto;
        width: 400px;
        height: 400px;
    }

    .main_picture img{
        width: 100%;
        height: 100%;
    }

    .main_text{
        flex: 1;
        padding: 25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .main_text button{
        padding: 10px 30px;
        font-family: 'asindinarub';
        border: none;
        font-weight: 500;
        font-size: 18px;
        border-radius: 30px;
        margin-top: 40px;
        width: 325px;
    }
}

 

 

 

참고 포스팅 : CSS 미디어 쿼리(Media Query) 사용법