CSS 참조 매뉴얼

CSS @규칙(RULES)

CSS 속성 전체

CSS @page 규칙 CSS @keyframes 규칙

CSS @media 규칙

이 @media 규칙은 단일 스타일 시트에서 여러 미디어 유형에 대해 스타일 규칙을 정의하는 데 사용될 수 있습니다. 그 뒤에는 반드시 쉼표로 구분된 미디어 유형 목록과 규칙을 포함한 블록이 따라야 합니다.

중국 @media 규칙을 사용하여 다양한 미디어 유형에 대해 다른 스타일을 정의할 수 있습니다.

@media는 다른 스크린 크기에 대해 다른 스타일을 설정할 수 있으며, 특히 반응형 페이지를 설정할 때 @media는 매우 유용합니다.

브라우저 크기를 조정하는 동안 페이지는 브라우저의 너비와 높이에 따라 재렌더링됩니다.

CSS @media 규칙의 사용 문법

이 규칙의 문법은 다음과 같습니다:

@media　media　type,...　{
　　　　/*　media-specific　rules　*/
}

또한 다른 미디어에 대해 다른 CSS 스타일을 사용할 수 있습니다:

<link　rel="stylesheet"　media="mediatype　and|not|only　(media　feature)"　href="style.css">

아래의 예제는 @media 속성을 사용하는 방법을 보여줍니다.

예제

@media　screen{
body　{
color:　#32cd32;
		　　font-family:　Arial,　sans-serif;
font-size:　14px;
}
}
@media　print　{
body　{
color:　#ff6347;
		　　font-family:　Times,　serif;
font-size:　12pt;
}
}
@media　screen,　print　{
body　{
line-height:　1.2;
}
}

테스트를 보세요‹/›

주의:규칙 밖의 스타일 룰 @media는 스타일 시트가 적용되는 모든 미디어 타입에 적용됩니다. 내부 규칙 @media는 CSS에 있습니다.2.1중에서 유효하지 않습니다.

미디어 타입

값	설명
all	모든 장치에 사용됩니다.
aural	사용되지 않습니다. 음성과 소리 합성기에 사용됩니다.
braille	사용되지 않습니다. 브라일 터치 피드백 장치에 적용됩니다.
embossed	사용되지 않습니다. 프린트에 사용되는 시각 장애인 인쇄 장치에 사용됩니다.
handheld	사용되지 않습니다. PDA와 작은 전화기와 같은 팔로우 장치 또는 더 작은 장치에 사용됩니다.
print	프린터와 프린트 미리보기에 사용됩니다.
projection	사용되지 않습니다. 프로젝터 장치에 사용됩니다.
screen	컴퓨터 스크린, 태블릿, 스마트폰 등에 사용됩니다.
speech	스크린 리더와 같은 발성 장치에 적용됩니다.
tty	사용되지 않습니다. 전화, 터미널 장치, 문자 제한된 휴대용 장치와 같은 고정된 문자 그리드에 사용됩니다.
tv	사용되지 않습니다. 텔레비전과 인터넷 텔레비전에 사용됩니다.

미디어 기능

값	설명
aspect-ratio	출력 장치 내의 페이지가 보이는 영역의 너비와 높이의 비율을 정의합니다.
color	출력 장치의每组 컬러 원소의 개수를 정의합니다. 컬러 장치가 아니면 값이 0입니다.
color-index	출력 장치의 컬러 쿼리 테이블에 정의된 항목 수. 컬러 쿼리 테이블을 사용하지 않으면 값이 0입니다.
device-aspect-ratio	출력 장치의 화면의 보이는 너비와 높이의 비율을 정의합니다.
device-height	출력 장치의 화면의 보이는 높이를 정의합니다.
device-width	출력 장치의 화면의 보이는 너비를 정의합니다.
grid	출력 장치가 레이저나 점진형으로 사용되는지 확인하는 데 사용됩니다.
height	출력 장치에서 페이지가 보이는 높이를 정의합니다.
max-aspect-ratio	출력 장치의 화면의 보이는 너비와 높이의 최대 비율을 정의합니다.
max-color	출력 장치의每组 색상 원소의 최대 개수를 정의합니다.
max-color-index	출력 장치의 색상 쿼리 테이블에서 최대 항목 수를 정의합니다.
max-device-aspect-ratio	출력 장치의 화면의 보이는 너비와 높이의 최대 비율을 정의합니다.
max-device-height	출력 장치의 화면의 보이는 최대 높이를 정의합니다.
max-device-width	출력 장치의 화면의 최대 보이는 너비를 정의합니다.
max-height	출력 장치에서 페이지가 보이는 최대 높이를 정의합니다.
max-monochrome	단색 프레임缓冲지에서 각 픽셀에 포함된 최대 단색 원소의 개수를 정의합니다.
max-resolution	장치의 최대 해상도를 정의합니다.
max-width	출력 장치에서 페이지가 보이는 최대 너비를 정의합니다.
min-aspect-ratio	출력 장치에서 페이지가 보이는 너비와 높이의 최소 비율을 정의합니다.
min-color	출력 장치의每组 색상 원소의 최소 개수를 정의합니다.
min-color-index	출력 장치의 색상 쿼리 테이블에서 최소 항목 수를 정의합니다.
min-device-aspect-ratio	출력 장치의 화면의 보이는 너비와 높이의 최소 비율을 정의합니다.
min-device-width	출력 장치의 화면의 최소 보이는 너비를 정의합니다.
min-device-height	출력 장치의 화면의 최소 보이는 높이를 정의합니다.
min-height	출력 장치에서 페이지가 보이는 최소 영역의 높이를 정의합니다.
min-monochrome	단색 프레임缓冲지에서 각 픽셀에 포함된 최소 단색 원소의 개수를 정의합니다
min-resolution	장치의 최소 해상도를 정의합니다.
min-width	출력 장치에서 페이지가 보이는 최소 영역의 너비를 정의합니다.
monochrome	단색 프레임缓冲지에서 각 픽셀에 포함된 단색 원소의 개수를 정의합니다. 단색 장치가 아니면 값은 0입니다
orientation	출력 장치에서 페이지가 보이는 영역의 높이가 너비보다 크거나 같은지 정의합니다.
resolution	장치의 해상도를 정의합니다. 예를 들어:96dpi, 300dpi, 118dpcm
scan	텔레비전 장치 클래스의 스캔 과정을 정의합니다.
width	출력 장치에서 페이지가 보이는 영역의 너비를 정의합니다.

브라우저 호환성

@media 속성의 브라우저 호환성, 아래 표의 숫자는 이 속성을 지원하는 브라우저의 최소 버전 번호를 나타냅니다; 모든 주요 브라우저는 이 규칙을 지원합니다.

	파이어폭스 1+ 구글 크롬1+ 인터넷 익스플로러 9+ 애플 사파리 1.3+ 오페라 9.2+

추가로 읽기

다음 튜토리얼을 참조하세요:CSS 미디어 타입。

CSS @page 규칙 CSS @keyframes 규칙