[CSS] 미디어쿼리

미디어쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML에 적용하는 스타일을 전환할 수 있는 CSS3의 속성 중 하나입니다. (IE9 이상)

@media [only 또는 not] [미디어유형] [and또는 ,콤마] (조건문) {실행문}

@media (min-width:320px) {실행문}

=> width값이 320px 이상일 때 실행문을 실행

@media (min-width:320px) and (max-width:768px) {실행문}

=> width값이 320px 이상이고 768px 이하일 때 실행문을 실해

min/max(접두사 구문): min은 최소, 즉 이상이라는 의미고 있고, max는 최대, 즉 이하라는 의미

※주의사항

-  띄어쓰기 주의. ~and (min-width:320px) {}

-  min/max 사용 시 작성 순서 주의하기.

    min을 사용할 때는 반드시 크기가 작은 순서대로 작성해야 하고, 

    max를 사용할때는 반드시 크기가 큰 순서대로 작성.