..

Search

media

media

<area> 태그의 media 속성


HTML <area> 태그 ⇒


정의 및 특징

<area> 태그의 media 속성은 대상이 최적화되는 미디어나 매체를 명시하지만, 단순히 참고 용도로만 사용됩니다.

 

media 속성은 대상이 특정 음성 매체나 출력 매체, 장치 등에 알맞게 설계되었음을 명시할 때 사용됩니다.

또한, 이 속성은 반드시 href 속성이 설정되어야만 사용할 수 있습니다.


문법

<area media=“속성값”>

속성값

속성값에 사용할 수 있는 연산자는 다음과 같습니다.

연산자   설명

and

 

AND 연산을 명시함.

not

 

NOT 연산을 명시함.

,

 

OR 연산을 명시함.

 

속성값에 사용할 수 있는 장치는 다음과 같습니다.

장치   설명

all

 

기본값으로, 모든 미디어 타입의 장치

aural

 

음성 합성 장치

braille

 

점자 기기

handheld

 

손으로 들 수 있는 소형 장치

projection

 

프로젝터

print

 

인쇄 미리 보기 기능 또는 페이지 출력

screen

 

컴퓨터나 테블릿, 스마트폰 등의 스크린

tty

 

텔레타이프 장치

tv

 

텔레비젼

 

속성값에 사용할 수 있는 값은 다음과 같습니다.

  설명

width

 

대상 디스플레이 영역의 너비를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (max-width:900px)”

height

 

대상 디스플레이 영역의 높이를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (min-height:600px)”

device-width

 

대상 디스플레이 또는 종이의 너비를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (min-device-width:500px)”

device-height

 

대상 디스플레이 또는 종이의 높이를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (max-device-height:800px)”

orientation

 

대상 디스플레이 또는 종이의 방향을 명시함.

“portrait”는 세로 방향, “landscape”는 가로 방향을 명시함.

ex) media=“print and (orientation:landscape)”

aspect-ratio

 

대상 디스플레이 영역의 너비와 높이의 비율을 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (aspect-ratio:16/9)”

device-aspect-ratio

 

대상 디스플레이 또는 종이의 장치 너비와 장치 높이의 비율을 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (device-aspect-ratio:16/9)”

color

 

대상 디스플레이의 색상 당 비트수를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (color:4)”

color-index

 

대상 디스플레이가 처리할 수 있는 색상의 개수를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (color-index: 512)”

monochrome

 

단색 프레임 버퍼에서의 픽셀 당 비트수를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“screen and (monochrome:3)”

resolution

 

대상 디스플레이 또는 종이의 화소밀도(pixel density)를 명시함.

“min-” 접두사로 최솟값, “max-” 접두사로 최대값을 명시할 수 있음.

ex) media=“print and (resolution:360dpi)”

scan

 

TV 디스플레이의 주사법(scanning method)을 명시함.

“progressive”는 프로그레시브 방식, “interlace”는 인터레이스 방식을 명시함.

ex) media=“tv and (scan:progressive)”

grid

 

출력 장치가 그리드(grid)인지 비트맵(bitmap)인지를 명시함.

“1”은 그리드, “0”은 그리드 이외의 장치를 명시함.

ex) media=“projection and (grid:1)”


예제
<img src="/examples/images/img_imagemap.jpg" alt="진실 혹은 거짓" usemap="#vending" style="width:320px; height:240px">
<map name="vending">
    <area shape="poly" coords="50,150,230,120,230,180,50,210" alt="진실"
        href="/examples/images/truth.jpg" media="screen and (min-color-index:512)">
</map>

코딩연습 ▶


지원하는 브라우저 및 버전

속성명

chrome

edge

ie

firefox

safari

opera

media 지원함 지원함 지원함 지원함 지원함 지원함

HTML5에서 변경된 사항

media 속성은 HTML5에서 <area> 태그에 새롭게 추가된 속성입니다.


연습문제