[css3] MediaQuries 반응형웹

반응형웹이란 웹의 크기에 맞춰 적합한 디자인을 적용시킨다.

어렵게 생각할 필요없이 크기에 따라 css적용을 다르게 해주면 된다는 말이다.

css3의 미디어쿼리를 사용해 웹사이즈에따라 css를 적용시킬수 있다.

미디어쿼리의 사용방법은 다음과 같다.

@media screen and (max-width: 480px) { 스타일적용 } //너비가 480이하

@media screen and (min-width: 481px) and (max-width: 1024px) { 스타일적용 } //너비가 481이상 1024이하

@media screen and (min-width: 1205px) { 스타일적용 } //너비가 1205이상

위와 같이 사이즈에 따라 스타일 적용을 다르게 하면 된다.

크기를 바꿔보세요

웹 사이즈를 조절해 보면 색깔이 바뀌는 것을 확인 할 수 있다.