[CSS]반응형 웹 media query

반응형 웹이란 웹을 이용하는 브라우저의 크기에 따라 다르게 표시하는 것을 의미한다.

CSS 내부에서 @media 쿼리를 이용하여 구현할 수 있다.

위와 같이 소스를 구성하였다.

<div>의 기본 속성은 파란색 배경과 하얀 글씨이다.

여기서 @media 쿼리문을 이용하여 스크린의 width값이 700px 보다 큰 작은 경우에는

배경을 빨간색과 검은 글씨로 바뀌도록 하였다.

여기서 

max-width:700px 가 의미하는 것은 screen_width<700px 과 같다. 

스크린의 크기가 최대 700px까지는 아래의 속성을 적용하겠단 뜻이다.

반대로

min-width:700px 라고 소스를 작성하였다면 screen_width>700px를 의미하므로 

스크린의 크기가 최소 700px까지 아래의 속성을 적용한다.

위의 사진이 스크린의 크기를 조정하여 출력된 결과이다.