@media

• 미디어 유형이 규칙을 만족할 때, 스타일을 적용.

• 형태 : @media 미디어유형 and (규칙) {스타일}

• 사용 방법
• 방법1) css 파일에 전역으로 선언
• 방법2) html에서 link 태그로 css를 불러올 때, media=”미디어 쿼리” 속성을 추가해서 해당 css 파일을 미디어 쿼리를 만족할 때만 적용되도록 함

• media query : @media와 스타일을 뺀 한줄 (미디어유형 and (규칙))

• ex1) @media screen and (min-width: 480px) {} ⇒ "뷰포트가 480 픽셀보다 넓을 때 스타일을 적용한다”
ex2)

@media print { //페이지가 인쇄된 경우에만 본문을 12pt로 설정
  body {
    font-size: 12pt;
  }
}

• 미디어 유형에는 screen, print이 있고 기본 값은 all이다

• 기본값을 그대로 쓰면 타입 and를 생략 가능,, @media (규칙) {스타일}
• 주의) not을 쓰려면 미디어 유형을 명시해줘야 한다! @media not all and (규칙)

• 기능을 and와 or로 이을 수 있다

• 쉼표로 구분해서 복수개의 미디어 쿼리의 스타일을 같이 선언 가능

규칙(기능)들

1. 너비와 높이
• 반응형 디자인을 만들 때, min-width와 max-width, width 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용할 수 있음

2. 방향성
• 세로 모드(세로가 가로보다 큼)인지 가로 모드(가로가 세로보다 큼)인지를 검사