[CSS] 반응형 웹 : Media Query

🔻Media Query🔻

해상도에 따라 다른 화면을 구현하는 css 기술

 

        @media 미디어유형 미디어쿼리연산자 (조건) {
        	구현부;
        }

 

미디어 유형

1. all : 모든 유형

2. screen(기본값) : 컴퓨터(스마트폰)

3. print : 인쇄장치

4. tv

5. projection

 

미디어 쿼리 연산자

1. and

2. only

3. not

 

미디어 쿼리 조건

• 주로 화면 크기를 조건으로 지정한다.
• 아래 크기는 유동적이다.

1. 모바일 화면 크기 : 480px

2. 태블릿 화면 크기 : 768px

3. 태블릿(가로) 화면 크기 : 1024px

4. 노트북 화면 크기 : 1600px

5. 데스크탑 화면 크기 : 1600px 이상

 

    <style>
        @media screen and (max-width: 1000px) {
            body {
                background-color: blue;
            }
        }
    </style>

컴퓨터 화면이 최대 1000px 너비를 가질 때 스타일을 적용한다.

 

 

복잡한 기능성 페이지를 만들 때에는 반응형 웹이 아닌 모바일용을 따로 만든다.