[CSS_04][WEB] 반응형 웹 - 미디어 쿼리

반응형 웹

화면의 크기에 따라서 웹 페이지에 각 요소들의 크기가 자동적으로 재조정 됩니다.

 

미디어 쿼리 문법 media query

 

screen width > 800px

→ @media(min-width:800px) {

}

 

screen width < 800px

→ @media(max-width:800px) {

}

 

@media only screen and (min-width: 300px) { logic }

 

only | not 키워드 : only는 뒤의 조건만, not은 뒤의 조건을 제외한 조건

screen키워드 : 미디어 타입을 말하며 all, screen(컴퓨터와 모바일), print(인쇄용도) 가 주로 쓰이고 더 많은 타입이 존재합니다.

 

미디어 쿼리 속성은 논리 연산자를 사용하지 않으며 속성 명 앞에 min-, max- 를 붙여서 최솟 값, 최댓 값을 판단합니다.

 

작을 때 max-를 클 때 min-을 적용합니다.

 

 

속성은 and (속성:속성값)   and (속성:속성값) 으로 나열합니다. minj- max-를 이용하여 범위로도 설정 가능합니다.