[CSS] 반응형 웹 - Media Query

 

Media Query란?

스마트 기기의 화면 크기에 따라서 유동적으로 CSS 를 변경할 수 있는 쿼리

 

 

1. style 태그에서 @media 쿼리를 이용하여 기준이 되는 규격을 설정한다.
2. 기준이 되는 화면 크기 안에서 조정하고자 하는 selector의 속성을 변경한다.

기준이 되는 규격은 최소 크기 (min-width) 또한 설정하여 범위를 세분화 할 수 있다.

<style>
    @media (max-width: 500px) {
        #grid {
            display: block;
        }

        .youtube {
            width: 400px;
            height: 240px;
        }

        ol {
            border-right: none;
            margin: auto;
            text-align: center;
        }
    }
</style>