@media

@media 타입 and (기능) { 스타일 }
기능에 들어가는 값을 Breakpoint라고 함

타입
screen : 화면 출력 스타일 지정
print : 인쇄될 때 스타일 지정
tv : tv에서
all : 기본값
타입을 안적으면 and도 안적어도 됨
안적으면 all and가 적인 적힌 것과 같음

기능
max-width : 최대 가로너비보다 작을 경우 스타일
min-width : 최초 가로너비보다 클 경우 스타일
orientation
  - portrait : 가로보다 세로가 더 긴 경우
  - landscape : 세로보다 가로가 더 긴 경우


사용방법
css 파일 하나로 관리하지 않고 css파일을 쪼개서 관리할 수 있다.
link태그의 속성으로 media 속성에 css에서 쓰던 @media의 기능 부분에 있던 값을 넣으면 된다. (괄호 포함하여 media 속성의 값으로 입력)

[예시]
  <link rel="stylesheet" href="./main.css" />
  <link rel="stylesheet" href="./main.medium.css" media="(max-width: 1260px)" />
  <link rel="stylesheet" href="./main.small.css" media="(max-width: 800px)" />


CSS에서
@media : media 규칙
타입 and (기능) : 쿼리(통상, 미디어 쿼리)
HTML에서 link태그에 media 속성의 값으로 넣을 때 미디어 쿼리를 넣으면 된다.