media query

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용하다.

@media : 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있다.
@import : 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰인다.

• 미디어 쿼리 구문

@media media-type and (media-feature-rule) {
  /* CSS rules go here */
}

• 미디어 유형 : all, print, screen, speech

• 논리 연산자 : and, not, only, ,(쉼표)

• 미디어 기능 규칙

1. 너비와 높이 : min-width, max-with, width
2. 방향성 : orientation(landscape-가로, portrait-세로)
3. 포인팅 장치의 사용 : 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미한다.

@media (hover: hover) {
    body {
        color: rebeccapurple;
    }
}

em과 px 모두 유효한 단위지만, 사용자가 브라우저의 글씨 크기를 변경했다면 em이 더 자연스럽게 동작한다.

• 기기별 width
  320px~768px미만 : 스마트폰
  768px ~ 1024px미만 : 태블릿
  1024px 이상 ~ : PC

• 주의점
  1.미디어 쿼리 밖의 코드가 미디어 쿼리 안의 코드에 상속할 수 있다.
  2.<meta name="viewport" content="width=device-width, initial-scale=1.0">를 head에 꼭 넣어주어야 한다.
  + 모바일 기준으로 먼저 만드는 게 좋다!

display: none;
-> 레이아웃에 영향을 주지 않도록 요소의 표시를 끕니다(문서는 요소가 존재하지 않는 것처럼 렌더링됨)

Media Queries for Standard Devices
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
+chrome 개발자 도구로도 확인 가능하다.