CSS_미디어쿼리

반응형 웹

• 다양한 기기와 화면 크기에 적응하여 웹 페이지의 레이아웃이 유동적으로 변하는 웹 디자인
• 사용자 경험(UX)을 최적화 하는 것과 다양한 기기에서 일관된 사용성을 제공하는 것이 주요 목표

적응형 웹

• 사전에 정의된 여러 "고정된 레이아웃"을 사용하여 다양한 화면 크기에 맞추는 방식
• 각기 다른 디바이스에 대해 특정 레이아웃을 준비 해두고, 사용자의 기기 화면 크기에 맞춰 적합한 레이아웃을 적용

@media screen and (min-width: 481px) and (max-width: 768px) {

    /* 화면 너비가 481px 이상 ~ 768px 이하 */
    .header {
        height: 150px;
    }

    .main {
        flex-direction: column;
    }

    .aside {
        display: none;
    }
}

/* 가로 모드 */
@media screen and (orientation: landscape) {
    body {
        background-color: lightgreen;
    }
}

/* 세로 모드 */
@media screen and (orientation: portrait) {
    body {
        background-color: lightpink;
    }
}