CSS @media(미디어)

CSS 미디어 타입은 문서를 포맷하여 다양한 미디어(예: 스크린, 인쇄, 청각 브라우저 등)에서 올바르게 표시할 수 있게 합니다.

미디어 타입 소개

CSS @media(미디어)는 스타일 시트의 가장 중요한 기능 중 하나로, 다른 미디어 타입에 대해 별도의 스타일 시트를 지정할 수 있습니다. 이는 프린터 친화적인 웹 페이지를 구축하는 가장 좋은 방법 중 하나입니다.-출력 미디어 타입에 대해 다른 스타일 시트를 할당하면 됩니다.

일부 CSS 속성은 특정 미디어에만 적용됩니다. 예를 들어, 이page-break-after속성은 페이지 미디어에만 적용됩니다. 그러나 여러 가지 속성은 다른 미디어 타입과 공유될 수 있으며, 해당 속성에 대해 다른 값을 사용해야 할 수 있습니다.font-sizesize

예를 들어, 이 속성은 화면과 인쇄 미디어에 사용될 수 있지만, 다른 값을 가질 수 있습니다.

보다 나은 가독성에 비해, 문서는 컴퓨터 화면에서 인쇄에 비해 더 큰 글자를 필요로 하며, 무선체 모양의 글자는 화면에서 더 쉽게 읽히는 것으로 간주됩니다. 그리고 선체 모양의 글자는 인쇄에서 더 인기가 있습니다. 따라서, 스타일 시트나 스타일 규칙 집합이 특정 미디어 유형에 적용되어야 합니다.

미디어에 의존하는 스타일 시트를 생성합니다

메서드1일반적으로 스타일 시트의 미디어 의존성을 지정하는 데는 세 가지 방법을 사용합니다:

를 사용하여

아래 예제의 스타일 선언은 브라우저가 화면에서14하지만, Arial 폰트는 본문 내용을 표시하는 데 사용되지만, 인쇄 시에는 Timespoint 폰트로 표시됩니다.12점.line-height، 두 가지 속성의 값은 모두 설정됩니다1.2：

@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;
　　　　}
}

메서드2를 사용하여

이 @import 규칙은 특정 대상 미디어에 스타일 정보를 설정하는 또 다른 방법입니다-导入된 스타일 시트의 URL 뒤에 단순히 구분 기호로 구분된 미디어 유형을 지정하면 됩니다.

@import　url("css/screen.css")　screen;
@import　url("css/print.css)　print;
body　{
　　　　background:　#f5f5f5;
　　　　line-height:　1.2;
}

문장의 print 미디어 유형 @import는 브라우저가 외부 스타일 시트 (print.css)를 로드하고 그 스타일을 단지 인쇄 미디어에만 사용하도록 지시합니다.

메서드3를 사용하여 <link> 요소

media이나 속성에 있는 요소는 HTML 문서의 외부 스타일 시트로 대상 미디어를 지정하는 데 사용됩니다.

<link rel="stylesheet" media="all" href="css/common.css">
<link rel="stylesheet" media="screen" href="css/screen.css">
<link rel="stylesheet" media="print" href="css/print.css">

이 예제에서 media 속성은 브라우저가 외부 스타일 시트 "screen.css"를 로드하도록 지시하며, 스크린에만 스타일을 적용하고, "print.css"를 프린팅에 사용합니다.

다양한 미디어 유형

아래 표는 다양한 미디어 유형(예: 프린터,携帯형 장치, 컴퓨터 스크린 등)을 사용하여 다양한 장치 유형을 정위치할 수 있는 다양한 미디어 유형을 나열합니다.

미디어 유형