Responsive Web(반응형 웹)

• 디스플레이의 종류에 따라 화면의 크기가 자동으로 변하는 웹 페이지를 의미

Media Query

• Responsive Web 을 구현하는 CSS technique
• 특정 조건에서는 어떤 CSS 를 적용 하라는 규칙 부여 가능

작성법

• CSS에 @media 라는 문법으로 작성
• 예시

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

• 해석

  • @media — media 쿼리를 시작

  • only screen — 어떤 디바이스에서 적용하는지 알려줌.
    only print— 프린트를 하고싶을 때.
    screen— 디바이스에 상관없이, 화면에 보이는 스크린이면 전부 적용.

  • and (max-width : 480px) — media feature라고 불리는 부분. 어느 조건에 아래의 css를 적용할지.

    • max/min-width

      • max-width

        • 요소 너비의 최대 값 지정
        • 지정 값보다 브라우저의 너비가 작아지면 요소 너비는 브라우저의 너비에 따라서 작아짐

      • min-width

        • 요소 너비의 최소 값 지정
        • 브라우저의 너비가 지정 값보다 작아져도 요소 너비는 지정 너비를 유지

      • 브라우저의 작은 창 처리 방식 개선

      • 사이트를 모바일 환경에서도 사용 가능 하게 만들 때 중요