[HTML5] 반응형 사이트 만들기 - 미디어쿼리

미디어 쿼리란?

화면 크기에 따른 각각의 속성 값을 지정하여 여러가지 화면을 구성하는 기술!

레이아웃을 기본적으로 할 줄 알아야 수월하게 할 수 있음!

 

    <style>
        body {background: #b71c1c; color: #fff;}
        h1::before {content: '1. ';}
        h1::after {content: ' - 기본';}
        /* 화면 너비가 0 ~ 1280px : 데스크탑 */
        @media (max-width: 1280px) {
            body {background: #880e4f;}
            h1::before {content: '2. ';}
            h1::after {content: ' - 1025 ~ 1280';}
        }
        /* 화면 너비가 0 ~ 1024px : 데스크탑 */
        @media (max-width: 1024px){
            body {background: #4a148c;}
            h1::before {content: '3. ';}
            h1::after {content: ' - 961 ~ 1024';}
        }
        /* 화면 너비가 0 ~ 960px : 노트북 */
        @media (max-width: 960px){
            body {background: #311b92;}
            h1::before {content: '4. ';}
            h1::after {content: ' - 577 ~ 768';}
        }
        /* 화면 너비가 0 ~ 768px : 태블릿 */
        @media (max-width: 768px){
            body {background: #4a148c;}
            h1::before {content: '5. ';}
            h1::after {content: ' - 577 ~ 768';}
        }
        /* 화면 너비가 0 ~ 576px : 모바일 */
        @media (max-width: 574px){
            body {background: #004d40;}
            h1::before {content: '6. ';}
            h1::after {content: ' - 0 ~ 576';}
        }
    </style>

 

youngbin.dothome.co.kr/responsive/layout2.html

 

들어가서 화면을 줄여보면 조건에 따라 background 색이 바뀌는 것을 알 수 있음!!

 

* 위와 같이 작업해도 되고 min-width 를 주어 좀 더 명확하게 작업해도 됨.

css 는 아래로 갈수록 우선순위가 커짐!