@media

미디어 쿼리(media query) 적용 규칙

• 각각의 항목들을 ‘and’ 또는 콤마로 구분해 준다.
  • and는 연결된 문장이 모두 참일 때 실행
  • 콤마는 연결된 문장이 하나만 참이어도 실행
• 상수 설명
  • only : 미디어 쿼리를 지원하는 웹브라우저에서만 해석을 가능하게 해준다.
  • not : not 다음에 나오는 조건을 부정한다.
• 미디어 유형에 사용되는 주요 상수
  • all : 모든 장치
  • screen : 컴퓨터 화면과 모바일 기기의 화면

미디어 쿼리(media query) 적용

CSS의 미디어 쿼리(media query) 규칙은 CSS 코드를 연동하는 방식에 따라서 몇가지 적용 패턴을 가진다.

CSS 코드 내부에 적용시

CSS 코드 내부에 미디어 쿼리를 적용시 원하는 위치에 아래와 같이 적용을 한다.

.header {
    background: #CCCCCC;
}

@media screen and (min-width: 600px) {
    .header {
        background: #EAEAEA;
    }
}

외부 CSS 파일을 가져오는 경우에 적용시

웹 문서에서 가져오는 경우

<link href="style.css" media="screen and (min-width: 800px)" type="text/css" rel="stylesheet" />

CSS 코드 내에서 가져오는 경우

@import url("style.css") screen and (min-width: 800px);

조건으로 사용되는 속성

@media (pointer:none), (pointer:coarse) {

}