CSS Rules

Draft

@media

CSS 코드를 분기할 수 있는 조건식을 작성할 수 있다.

설명

장치의 유형(출력방식 또는 화면)과 장치의 환경(화면 해상도, 뷰포트의 크기), 상태(기기의 방향 등)에 따라서 CSS 코드를 분기할 때 사용하는 규칙이다.

구문

@media [notoronly] and [()] [] [()] { }CSS3기본형식
@media screen and (min-width: 800) { }CSS2사용 예
미디어 장치는 스크린이고 최소 가로 해상도가 800픽셀을 유지할 경우에 CSS 코드가 사용된다.

예제

(1) max-width를 조건으로 미디어쿼리를 적용하는 경우에는 큰 값부터 작성한다.

(2) min-width를 조건으로 미디어쿼리를 적용하는 경우에는 작은 값부터 작성한다.

기술 문서

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

@media [only 또는 not] [ 미디어 유형] (조건문) { 실행할 코드 }
  • 각각의 항목들을 ‘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);

조건으로 사용되는 속성

속성설명적용 가능한 값코드
pointer포인팅 장치의 정확도를 테스트한다. coarse 값은 모바일 장치를 구분하는 조건으로 사용될 수 있다.
  • none: 포인팅 장치를 미포함
  • coarse: 제한된 정확도의 포인팅 장치 포함
  • fine: 정확한 포인티 장치를 포함
@media (pointer:none), (pointer:coarse) {

}

 

    
    
    

 

지원 웹브라우저