[HTML+CSS] Media Query, Viewport

1. 미디어쿼리 (Media Query)

미디어쿼리란 PC 뿐만 아니라 모바일과 태블릿에도 대응되는 반응형 또는 적응형 웹사이트를 만들 때 사용되는 CSS 구문으로 특정 조건에서만 CSS 코드를 적용시켜 준다.

• min-width : 최소 너비
• max-width : 최대 너비
• min-height : 최소 높이
• max-height : 최대 높이
• aspect-ratio : 가로세로비
• orientation : 방향

@media (조건) {
  속성
}

ex

.media {
    width: 500px;
    height: 500px;
    background-color: red;
}

/* 미디어쿼리 */
@media (min-width: 320px) and (max-width: 800px) {
      .media {
        width: 300px;
        height: 300px;
        background-color: yellow;
        border: solid 10px blue;
      }
}

• **min-width**와 **max-width**로 브라우저 가로폭 설정
• 브라우저의 가로폭이 최소 320px, 최대 800px이 되었을 경우, 중괄호 안의 css 속성으로 대체하겠다는 의미

---

2. 미디어쿼리 사용 시 주의사항

2.1 viewport (뷰포트)

viewport : 너비와 배율을 설정할 때 사용하는 메타 태그의 속성
viewport를 설정하면 모바일 기기에서도 페이지의 너비나 화면 배율을 설정할 수 있다.

<meta name-"viewport" content="width=device-width, initial-scale=1.0">

• 다양한 디지털 기기의 화면 상에 표시되는 영역을 의미
• 미디어쿼리가 제대로 작동하지 않는 문제가 발생할 수 있으므로 viewport(기기화면을 의미)로 너비와 배율을 설정해야 모바일에서 의도한 화면을 볼 수 있음
  • .width=device-width: viewport의 가로폭 = 디바이스(viewport)의 가로폭 으로 대체시킨다는 의미
  • .initial-scale=1.0: 비율은 항상 1.0 로 유지시킨다는 의미

2.2 CSS 속성 상속

.media {
    width: 500px;
    height: 500px;
    background-color: yellow;
}

@media (min-width: 320px) and (max-width: 800px) {
    .media {
        width: 300px;
        height: 300px;
        background-color: none;
    }
}

• 기본적으로 미디어쿼리 외부 영역에 있는 CSS 속성을 상속받음(background color 노란색)
• 만약 상속을 받지 않고자 하면 속성값으로 none 입력