코딩의 시작, TCP School

◀ 이전 다음 ▶

<area> 태그의 media 속성

HTML <area> 태그 ⇒

정의 및 특징

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

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

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

문법

속성값

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

연산자		설명
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>

코딩연습 ▶