미디어 쿼리 Media Queries 사용하기

미디어 화면 크기에 맞게 웹사이트를 변경하는 기술

<style>

    /* 웹 브라우저의 크기가 320px 이상일 때 배경색을 빨간색 개열로 변경합니다. */
    @media all and (min-width:320px) {
        body {
            background: #e65d5d;
        }
    }

    /* 웹 브라우저의 크기가 768px 이상일 때 배경색을 초록색 개열로 변경합니다. */
    @media all and (min-width:768px) {
        body {
            background: #2dcc70;
        }
    }

    /* 웹 브라우저의 크기가 960px 이상일 때 배경색을 파란색 개열로 변경합니다. */
    @media all and (min-width:960px) {
        body {
            background: #6fc0d1;
        }
    }

</style>

미디어 쿼리의 기본 문법

@media [only 또는 not] [미디어 유형][and 또는 ,콤마](조건문){실행문}

미디어 쿼리 구분은 대소문자를 구별하지 않습니다.

 

@media

미디어 쿼리 문법의 시작을 알리는 부분입니다.

 

다음에 또 정리하자 : )