CSS:media

04 Nov 2018

CSS : @media

@media only screen and (max-width: 600px) {
    body {
        background-color: lightblue;
    }
}

@media

이 @media규칙은 미디어 쿼리에 사용되어 다른 미디어 유형 / 장치에 대해 다른 스타일을 적용합니다.

미디어 쿼리를 사용하여 다음과 같은 여러 가지 사항을 확인할 수 있습니다.

뷰포트의 너비와 높이 장치의 너비와 높이 방향 (가로 또는 세로 모드의 태블릿 / mobile) 해결 미디어 쿼리를 사용하면 데스크톱, 랩톱, 태블릿 및 휴대 전화에 맞춤형 스타일 시트 (반응 형 웹 디자인)를 제공하는 데 널리 사용되는 기술입니다.

미디어 쿼리를 사용하여 인쇄 된 문서 또는 화면 판독기 (mediatype : 인쇄, 화면 또는 음성)에 대해서만 특정 스타일을 지정할 수도 있습니다.

미디어 유형 외에도 미디어 기능이 있습니다. 미디어 기능은 사용자 에이전트 또는 디스플레이 장치의 특정 기능을 테스트 할 수있게하여 미디어 쿼리에보다 구체적인 세부 정보를 제공합니다.

예를 들어 특정 너비보다 크거나 작은 화면에만 스타일을 적용 할 수 있습니다.

미디어 유형

all : 기본값.모든 미디어 유형 장치에 사용됨
print :프린터에 사용됨
screen : 컴퓨터 화면, 태블릿, 스마트폰 등에 사용됩니다.
speech : 페이지를 “읽는” 화면 판독기에 사용됩니다.

미디어 기능

any-hover :사용 가능한 입력 메커니즘으로 사용자가 요소 위를 맴돌 수 있습니까? (미디어 쿼리 레벨 4에 추가)
any-pointer : 사용 가능한 입력 메커니즘이 포인팅 장치이며, 그렇다면 얼마나 정확합니까? (미디어 쿼리 레벨 4)
aspect-ratio : 뷰포트 폭과 높이 사이의 비율
color : 출력 장치의 색상 구성 요소당 비트 수
color-gamut : 사용자 에이전트 및 출력 장치에서 지원하는 대략적인 색 범위(미디어 쿼리 수준 4)
color-index : 장치에서 표시할 수 있는 색상의 수
grid : 장치가 그리드인지 비트맵인지 여부
height : 뷰포트 높이
hover : 1차 입력 메커니즘이 사용자가 요소 위로 마우스를 이동할 수 있도록 허용합니까? (미디어 쿼리 레벨 4에 추가)
inverted-colors : 브라우저가 컬러입니까, 아니면 기본 OS 인버팅 컬러입니까? (미디어 쿼리 레벨 4에 추가)
light-level : 현재 주변 조도 수준(미디어 쿼리 레벨 4)
max-aspect-ratio : 디스플레이 영역의 폭과 높이 사이의 최대 비율
max-color : 출력 장치의 색상 구성 요소당 최대 비트 수
max-color-index : 장치에서 표시할 수 있는 최대 색 수
max-height : 브라우저 창과 같은 디스플레이 영역의 최대 높이
max-monochrome : 단색(회색) 장치의 “색상”당 최대 비트 수
max-resolution : dpi 또는 dpcm를 사용한 장치의 최대 해상도
max-width : 브라우저 창과 같은 디스플레이 영역의 최대 너비
min-aspect-ratio : 디스플레이 영역 폭과 높이 사이의 최소 비율
min-color : 출력 장치의 색상 구성 요소당 최소 비트 수
min-color-index : 장치에서 표시할 수 있는 최소 색상 수
min-height : 브라우저 창과 같은 디스플레이 영역의 최소 높이
min-monochrome : 단색(회색) 장치의 “색상”당 최소 비트 수
min-resolution : dpi 또는 dpcm를 사용한 장치의 최소 해상도
min-width : 브라우저 창과 같은 디스플레이 영역의 최소 너비
monochrome : 단색(회색) 장치의 “색상”당 비트 수
orientation : 뷰포트의 방향(가로 또는 세로 모드)
overflow-block : 출력 장치가 블록 축을 따라 뷰포트를 오버플로우하는 콘텐츠를 어떻게 처리합니까(미디어 쿼리 레벨 4)
overflow-inline : 인라인 축을 따라 뷰포트가 오버플로되는 컨텐츠를 스크롤할 수 있습니다(미디어 쿼리 수준 4에 추가).
pointer :1차 입력 메커니즘이 포인팅 장치이며, 그렇다면 얼마나 정확한가? (미디어 쿼리 레벨 4에 추가)
resolution : dpi 또는 dpcm를 사용한 출력 장치의 해상도
scan : 출력 장치의 스캔 프로세스
scripting : 스크립팅(예: JavaScript)을 사용할 수 있습니까? (미디어 쿼리 레벨 4에 추가)
update : 출력 장치가 콘텐츠의 모양을 얼마나 빨리 수정할 수 있는지(미디어 쿼리 수준 4에 추가)
width : 뷰포트 폭

Twitter Facebook Google+