[CSS]반응형 웹을 위한 Media Query

Media Query

미디어 쿼리는 장치에 따라 다른 레이아웃을 작성하거나, 다른 미디어 종류에 따라 다른 css 코드를 작성하는 등 반응형 웹페이지를 작성할 때 유용한 구문이다.

 

 

Media type

• all : 기본값, 모든 미디어 장치에 사용됨
• print : 프린터에 사용
• screen : 컴퓨터 스크린, 태블릿, mobile 등
• speech : 페이지를 읽어주는 화면 낭독기

 

Media Query 문법

/* for css */
 
.bigScreen {
 background-color = yellow;
 ...
}
 
 
@media midea-type and (midea-feature){
    css-code
}
 
@media screen and (min-width:550px){
    .bigScreen {
        display: flex;
    }
}