CSS Responsive web(Media Query)

  HTML을 그리는 web client의 Size는 web client가 실행되는 Device의 물리적 크기는 물론 화면 해상도에 따라 다양하게 변경될 수 있다. WEB 화면은 해당 Size에 맞춰 자동으로 변해야 할 필요가 있으며 이를 위해 CSS에서 제공하는 기능이 Media Query 이다.

  사용방법은 다음과 같다.

@media only screen and (max-width: 480px) {  
  body {  
    font-size: 12px;  
  } 
}

• @media
  - Media query 시작 선언.

• only screen
  - 적용 대상 Device를 선언하는 것으로 screen은 표출되는 장비의 모니터를 의미함, printer일 경우 only printer로도 사용가능.
  

• and (max-width: 480px)
  - media feature 라는 부분으로 해당 조건일때만 아래 css 문법을 적용하도록 지정하는 기능.