media query

모바일 웹 화면을 개발하다보면

 

단말기 마다 해상도가 달라서 css를 따로 작업해야 할 때가 있습니다.

 

media query를 사용하면 쉽게 해결할 수 있습니다.

 

==============================================================

@media (min-width: 280px) and (max-width: 360px) {
    input[type=text] {width: 100px;}
    input[type=file] {width: 50px;}
    textarea {width: 150px;}
}

==============================================================

 

위의 css 내용을 보게 되면

 

화면이 최소 280px 부터 최대 360px 까지의 화면에서

 

"input 태그 타입이 text이면 width는 100px"

"input 태그 타입이 file이면 width는 50px"

"textarea 태그이면 width는 150px"

 

으로 적용하겠다는 뜻입니다.