css 미디어 쿼리

반응형 웹을 만들기 위해선 미디어쿼리를 사용해야한다.

반응형 웹이란 예를들어 웹의 화면이 일정 크기 이상일때는 어떠한 동작, 이하일때는 어떠한 동작 등

여러가지 크기의 화면에서 동작할 수 있게 한다.

화면의 크기에 따라 웹 페이지의 각 요소들이 반응해서 최적화된 형태로 바뀌게 하는것을

반응형 웹(Responsive Web)이라고한다.

@media 이하부터 스타일 태그가 닫히기 전까지는 미디어 쿼리의 예시이다.

브라우저 크기가 800 미만일 경우

브라우저 크기가 800 이상일 경우

위의 코드 display:none은 화면에 출력시키지 않겠다는 코드이며 위의 결과와 같이 잘 동작하는 것을 볼 수 있다.