Media Queries 테스트

<style type="text/css">
@media screen and (max-width: 320px) {
#wrap { width:320px }
#left { border:2px solid #F00; width: 316px }
#contents{ border:2px solid #0F0; width: 316px }
#right { border:2px solid #00F; width: 316px }
}
@media screen and (min-width: 321px) and (max-width: 800px) {
#wrap { width:800px }
#left { float: left; border:2px solid #F00; width: 196px }
#contents{ float: left;border:2px solid #0F0; width: 596px }
#right { clear:both;border:2px solid #00F; width: 796px }
}
@media screen and (min-width: 801px) {
#wrap { width:100% }
#left { float: left; border:2px solid #F00; width: 20% }
#contents{ float: left;border:2px solid #0F0; width: 50% }
#right { float: left;border:2px solid #00F; width: 20% }
}
</style>