HTML <style> 미디어 속성

HTML <style> 태그

정의 및 사용법

media 속성은 CSS 스타일이 대상으로 하는(적정화) 미디어/장치를 정의합니다.

이 속성은 스타일이 적용될 특정 장치(예: iPhone) 또는 음성 또는 프린트 미디어에 대한 것을 정의합니다.

추천:이 속성은 여러 값을 받을 수 있습니다.

예제

예제 1

프린트에 사용할 스타일을 규정합니다:

<style media="print">
h1 {color:#000000;}
p {color:#000000;}
body {background-color:#FFFFFF;}
</style>

본인이 직접 시도해 보세요

예제 2

media 속성의 width 특성을 사용하여 두 그룹 스타일을 구분합니다:

<style media="screen AND (max-width:500px)" type="text/css">
a {
  background-color: grey;
  color: white;
  padding: 15px;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
  color: red;
  font-weight: 400;
}
</style>

본인이 직접 시도해 보세요

주의사항:브라우저 창 너비가 500 픽셀보다 작을 때는 첫 번째 그룹 스타일을 사용하고, 창 너비가 500 픽셀보다 크를 때는 두 번째 그룹 스타일을 사용합니다.

문법

<style media="value">

가능한 연산자

연산자 설명
and 규정 AND 연산자.
not 규정 NOT 연산자.
, 규정 OR 연산자.

스타일의 사용 조건은 매우 자세히 설계할 수 있습니다. 먼저 명확히 해야 할 것은 대상 장치 유형입니다. 다음 표는 모든 규정된 값의 요약입니다:

장치

장치 설명
all 기본 설정. 모든 장치에 적용됩니다.
aural 음성合成기.
braille 점자 피드백 장치.
handheld håndholdt enhet (liten skjerm, begrenset bredbånd).
projection 프로젝터.
print 프린트 предпросмотр / 프린트 페이지.
screen 컴퓨터 스크린.
tty 정적 간격 문자 그리드를 사용하는 텔레그래프 타이핑 기계와 유사한 미디어.
tv 텔레비전 장치(저 해상도, 롤링 능력이 제한적입니다).

브라우저는 장치 분류를 설명하는 역할을 합니다. 일부 장치 유형(예: screen과 print)은 모든 브라우저에서 일관되게 설명되지만, 일부 장치(예: handheld)는 설명이 무작위로 많이 달라질 수 있습니다. 따라서 특정 장치에 대한 브라우저의 설명이 자신과 일치하는지 확인하는 것이 매우 중요합니다.

특성

특성 설명
width

목표 디스플레이 영역의 너비를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (min-width:500px)"
height

목표 디스플레이 영역의 높이를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (max-height:700px)"
device-width

목표 디스플레이/용지의 너비를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (device-width:500px)"
device-height

목표 디스플레이/용지의 높이를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (device-height:500px)"
orientation

목표 디스플레이/용지의 방향을 정의합니다.

지원되는 값: portrait 또는 landscape입니다.

이 기능에는限定어가 없습니다.

예를 들어: media="all and (orientation: landscape)"
aspect-ratio

목표 디스플레이 영역의 너비/높이 비율을 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (aspect-ratio:16/9)"
device-aspect-ratio

목표 디스플레이/용지의 장치 너비/장치 높이 비율을 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (aspect-ratio:16/9)"
color

목표 디스플레이의 각 색상의 비트 수를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (color:3)"
color-index

목표 디스플레이가 처리할 수 있는 색상 수를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (min-color-index:256)"
monochrome

단색 프레임 버퍼에서 각 픽셀의 비트 수를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="screen and (monochrome:2)"
resolution

목표 디스플레이/용지의 픽셀 밀도(dpi 또는 dpcm)를 정의합니다.

"min-"와 "max-" 접두사를 사용할 수 있습니다.

예를 들어: media="print and (resolution:300dpi)"
scan

TV의 스캔 모드를 정의합니다.

지원되는 값은 progressive와 interlace입니다.

이 기능에는限定어가 없습니다.

예를 들어: media="tv and (scan:interlace)"
grid

출력 장치가 그리드인지 비트맵인지 정의합니다.

그리드형 장치는 고정된 그리드를 사용하여 내용을 표시합니다. 예를 들어, 문자 기반의 터미널과 단一行로 표시되는 푸시 알림기와 같습니다.

지원되는 값은 0과 1(1은 그리드형 장치를 의미합니다).

이 기능에는限定어가 없습니다.

예를 들어: media="handheld and (grid:1)"

width와 같은 기능은 일반적으로 min과 max와 함께 사용됩니다. 이러한限定어를 사용하지 않아도 스타일의 사용이 매우 정확한 창 크기에 따라 결정될 수 있지만,限定어를 추가하면 조건이 더 유연해집니다.

위 표는 사용할 수 있는 다양한 기능을 나열하고 설명합니다. 특별히 명시되지 않는 경우, 이러한 기능들은 min-과 max-로修饰하여 범위를 나타내는 것이 아니라 정확한 값으로 사용될 수 있습니다.

규정된 장치 상황과 유사하게, 이러한 기능은 브라우저가 설명할 책임입니다. 브라우저가 어떤 기능을 인식하고, 이러한 기능이 언제 존재하고 사용할 수 있는지에 대한 구체적인 상황은 복잡합니다. 이러한 기능을 스타일링에 적용하려면 반드시 전체적인 테스트를 수행하고, 예상되는 기능이 사용되지 않을 경우 대체 스타일을 준비해야 합니다.

브라우저 지원

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
지원 지원 지원 지원 지원

HTML <style> 태그