[attribute] HTML - media 속성 - 링크된 웹문서가 어떤 미디어/기기에 최적화 된 상태인지 표시 (= media속성 = 미디어속성)

1. media 예제 - <a> 경우
2. media 정의
3. media 구문
4. media 예제 - <area> 경우
5. media 예제 - <link> 경우
6. media 예제 - <source> 경우
7. media 예제 - <style> 경우

media 예제 - <a> 경우

 

<a href="https://homzzang.com/b/html-223?output=print" media="print and (resolution:300dpi)">프린트 위해 media 속성 열기</a>

 

media 정의

 

링크된 웹문서가 어떤 미디어/기기에 최적화 된 상태인지 표시.

 

---

 

1.

• 대상 URL이 특수 장치(예: iPhone), 음성 또는 인쇄 매체용으로 설계되었음을 지정하는 데 사용. (예: <style media="value"> 경우, 해당 미디어에 최적화 된 전용 스타일 지정 의미.)
• 연산자 이용해 여러 속성값 지정 가능.

 

2. media> 속성 사용 가능한 태그 종류

• <a>, <area>, <link> 태그 - href 속성 갖어야 사용 가능
• <source> 태그 - src (※ <audio>, <video> 태그 안 경우) 또는 srcset (※ <picture> 태그 안 경우) 속성 갖어야 사용 가능.
• <style> - 그냥 사용 가능.

 

3.

주요 최신 브라우저 모두 지원.

 

media 구문

 

• <a href="URL" media="value">
• <area href="URL" media="value">
• <link href="URL" media="value">
• <source srcset="URL" media="value">
• <style media="value">

 

---

[속성값]

 

value

속성값은 기기(Device)와 스크린(Screen) 정보를 연산자(Operator)로 연결조합해 표시함. 

 

연산자 (Operator)

• and - AND 연산자
• not - NOT 연산자
• , - OR 연산자

 

기기 (Device)

• all - 모든 기기에 적합 (기본값) 
• aural - 음성 합성기 (<link> 태그 경우, 폐기예고)
• braille -  점자 피드백 기기  (<link> 태그 경우, 폐기예고)
• handheld - 손에 잡힐 크기의 기기 (작은 화면, 제한된 대역폭)  (<link> 태그 경우, 폐기예고)
• projection- 프로젝터  (<link> 태그 경우, 폐기예고)
• print - 인쇄 미리보기 모드 / 인쇄된 페이지
• screen - 컴퓨터 화면
• tty - 고정 피치 문자 격자 (a fixed-pitch character grid)를 사용하는 텔레타이프 및 유사 미디어  (<link> 태그 경우, 폐기예고)
• tv - 텔레비전 타입 기기 (저해상도, 제한된 스크롤 능력)  (<link> 태그 경우, 폐기예고)

 

화면 (screen)

• 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)"  (<link> 태그 경우, 폐기예고)
• device-height - 타겟 디스플레이/용지의 높이 지정. / "min-" 및 "max-" 접두사 사용 가능. / (예) media="screen and (device-height:500px)"  (<link> 태그 경우, 폐기예고)
• 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 (device-aspect-ratio:16/9)"  (<link> 태그 경우, 폐기예고)
• 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 - 출력 장치가 그리드인지 비트맵인지 지정. / 가능값: 그리드이면 1이고 그렇지 않은 경우 0임. / (예) media="handheld and (grid:1)"

media 예제 - <area> 경우

 

<img src="homzzang.gif" width="200" height="100" alt="홈짱닷컴" usemap="#hz">

<map name="hz">

  <area shape="rect" coords="0,0,50,50" alt="HTML" href="https://homzzang.com/html" media="screen and (min-color-index:256)">

</map>

 

media 예제 - <link> 경우

(예) 프린트용 외부스타일 별도 지정

 

<link rel="stylesheet" type="text/css" href="basic.css">

<link rel="stylesheet" type="text/css" href="print.css" media="print">

<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 강의</p>

 

media 예제 - <source> 경우

 

<picture>

  <source media="(min-width: 650px)" srcset="https://i.imgur.com/3h0LOk9.gif"><!--능글-->

  <source media="(min-width: 465px)" srcset="https://i.imgur.com/YrkG5xB.gif"><!--키스-->

  <img src="https://i.imgur.com/PQNhCln.gif" alt="Flowers" style="width:auto;"><!--협박-->

</picture>

 

결과보기

media 예제 - <style> 경우

(예) 프린트용 내부스타일 별도 지정.

 

<style>

h1 {color:white;}

p {color:white;}

body {background-color:black;}

</style>

<style media="print">

h1 {color:black;}

p {color:black;}

body {background-color:white;}

</style>

<h1>홈짱닷컴 Homzzang.com</h1>

<p>홈페이지 제작관리 강의</p>

 

결과보기