[CSS] @media

장치의 특징을 파악하여 알맞은 css를 적용하기 위해 사용됨. 예를들어 스크린 사이즈, 스크린 orientation 등을 통해 조건에 맞는 css를 반영함. 연산자를 통해 if 문처럼 처리 가능. 

 

• 연산자
  • and : and와 동일
  • , : or 역할
  • not : ! 역할
  • only : 모든 조건문이 참일 경우만 동작

 

• 유형
  • screen : 화면
  • print : 프린트 미리보기
  • all : 모두
  • speech : 마이크 등
    
    
• 연산자에 사용되는 속성값
  • width, height
    • max-width, min-width 처럼 조합하여 가능
  • orientation
    • landscape
    • portrait
  • hover

 

• 사용 예

@media screen and (min-width : 1000px) {
    html{
      display: grid;
      place-items: center;
      align-items: center;
    }

    body{
      width: 80%;
    }
}